Когда я нажимаю «1 means» означает «январь», я хочу, чтобы ion-grid
отображал данные добровольцев за январь. console.info
уже получил правильные данные, но ion-grid
не обновляется.
Это логин в веб-браузере
html-страница
<ion-header>
<ion-toolbar color = "danger">
<ion-buttons>
<button ion-button navPop icon-only>
<ion-icon ios = "ios-arrow-back" md = "md-arrow-back"></ion-icon>
</button>
</ion-buttons>
<ion-buttons style = "background: transparent;" end>
<button style = "background: transparent;" (click) = "doRadio()">月份选择</button>
</ion-buttons>
<ion-title text-wrap>志愿者评选</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-grid>
<ion-row>
<ion-col>
<ion-card (click) = "goToVolunteerVoteDetail(volunteer)" style = "width:26%" class = "pin" *ngFor = "let volunteers of volunteer">
<img src = "{{volunteers.Preview_image1}}" height = "100">
<div *ngIf = "volunteers.title" class = "volunteer-title">
<small>{{volunteers.title}}</small>
</div>
<div class = "volunteer-title">{{volunteers.like_number}}分</div> <!-- 志愿者评选头像像素:505x505px -->
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
страница ts
import { Component } from '@angular/core';
import { NavController, NavParams, ToastController, AlertController, ModalController } from 'ionic-angular';
import { NewsDataProvider } from '../../providers/news-data/news-data';
import { VolunteerVoteDetailPage } from '../volunteer-vote-detail/volunteer-vote-detail';
@Component({
selector: 'page-volunteer-vote',
templateUrl: 'volunteer-vote.html',
})
export class VolunteerVotePage {
volunteer:any;
volunteer1:any;
//volunteer2:any;
// testRadioOpen = false;
// testRadioResult: any;
constructor(
public navCtrl: NavController, public navParams: NavParams,
public newsData:NewsDataProvider,public toastCtrl: ToastController,
public alertCtrl: AlertController,public modalCtrl: ModalController
){
this.getVolunteerVote();
this.getVolunteerVote1();
//this.getVolunteerVote2();
}
getVolunteerVote(): Promise<any> {
return this.newsData.getVolunteerVote().then(data => {
this.volunteer = data;
});
}
getVolunteerVote1(): Promise<any> {
return this.newsData.getVolunteerVote1().then(data => {
this.volunteer1 = data;
});
}
// getVolunteerVote2(): Promise<any> {
// return this.newsData.getVolunteerVote2().then(data => {
// this.volunteer2 = data;
// });
// }
goToVolunteerVoteDetail(volunteerItem:any) {
this.navCtrl.push(VolunteerVoteDetailPage,{
volunteer:volunteerItem
});
}
doRadio() {
const alert = this.alertCtrl.create();
alert.setTitle('请选择月份');
alert.addInput({
type: 'radio',
label: '1月',
value: this.volunteer1,
checked: true
});
// alert.addInput({
// type: 'radio',
// label: '2月',
// value: this.volunteer2
// });
alert.addButton({
text: '确认',
handler: (data: any) => {
console.info('Radio data:', data);
// this.testRadioOpen = false;
// this.testRadioResult = data;
}
});
alert.addButton('取消');
alert.present();
}
}
страница провайдера
getVolunteerVote() {
return new Promise(resolve => {
this.http.get('http').map(res => res.json().data).subscribe(data => {
this.data = data;
resolve(this.data);
});
});
}
getVolunteerVote1() {
return new Promise(resolve => {
this.http.get('http').map(res => res.json().data).subscribe(data => {
this.data = data;
resolve(this.data);
});
});
}
Вы всегда проходите цикл через volunteer
на ngFor
, но не меняете его значение после нажатия кнопки 确认
.
Я бы порекомендовал вам добавить поле selectedVolunteer
для хранения данных за выбранный месяц и просмотреть его, чтобы отобразить выбранные данные. И замените его значение при нажатии кнопки 确认
.
<ion-card (click) = "goToVolunteerVoteDetail(volunteer)" style = "width:26%" class = "pin" *ngFor = "let volunteers of selectedVolunteer">
export class VolunteerVotePage {
selectedVolunteer: []; // keep selected data here
getVolunteerVote(): Promise<any> {
return this.newsData.getVolunteerVote().then(data => {
this.volunteer = data;
this.selectedVolunteer = data; // show January data be default;
});
}
doRadio() {
alert.addButton({
text: '确认',
handler: (data: any) => {
console.info('Radio data:', data);
this.selectedVolunteer = data;
}
});
alert.addButton('取消');
alert.present();
}
}
см. демонстрация.
Это здорово, но я хочу установить по умолчанию getVolunteerVote
, а не getVolunteerVote1
с данными января. Данные за январь, когда я выбрал Ян, а затем показаны данные за январь. Спасибо
@YuyangHe Хорошо, я неправильно понял ваши функции, но вы все равно можете исправить это. Или просто замените volunteer
выбранными данными, если вы не против потерять исходные данные. :-)
Конечно .. теперь у меня уже работает, но как я могу установить другой месяц в файле ts
?
@YuyangHe, извини, что ты имеешь в виду при установке другого месяца? Установить их в alertCtrl?
哥们 忙完 了 看下 微 信 有 个小 问题 请教
Вы всегда проходите цикл через
volunteer
наngFor
, но не меняете его значение после нажатия кнопки确认
.