Ionic3 изменить данные страницы с помощью `радио`

Когда я нажимаю «1 means» означает «январь», я хочу, чтобы ion-grid отображал данные добровольцев за январь. console.info уже получил правильные данные, но ion-grid не обновляется.

Это логин в веб-браузере

Ionic3 изменить данные страницы с помощью `радио`

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, но не меняете его значение после нажатия кнопки 确认.

Pengyy 02.05.2018 05:41
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
0
1
39
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы всегда проходите цикл через 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 с данными января. Данные за январь, когда я выбрал Ян, а затем показаны данные за январь. Спасибо

Yuyang He 02.05.2018 06:58

@YuyangHe Хорошо, я неправильно понял ваши функции, но вы все равно можете исправить это. Или просто замените volunteer выбранными данными, если вы не против потерять исходные данные. :-)

Pengyy 02.05.2018 07:02

Конечно .. теперь у меня уже работает, но как я могу установить другой месяц в файле ts?

Yuyang He 02.05.2018 08:45

@YuyangHe, извини, что ты имеешь в виду при установке другого месяца? Установить их в alertCtrl?

Pengyy 02.05.2018 08:50

哥们 忙完 了 看下 微 信 有 个小 问题 请教

Yuyang He 25.05.2018 06:20

Другие вопросы по теме