使用Ionic 3在Modal页面中显示选定的行数据

Question

我有一个使用rest API从数据库加载的列表，在第一页中，我仅显示了两个字段name和subject。当我单击模式页面中的行时，我需要显示所选的行数据。

holiday.html

test_

holiday.ts

<ion-list>
    <div class="row header">
        <div class="col">Name</div>
        <div class="col">Subject</div>
    </div>

    <ion-item *ngFor="let list of HolidaysList">
        <div (click)="openModal(list)" class="row header">
            <div class="col">{{list.Name}}</div>
            <div class="col"> {{list.Subject}} </div>
        </div>
    </ion-item>
</ion-list>

现在我需要将被点击（或选定）的行数据传递给模态，该怎么做？

modal.html

GetHolidays: any;

constructor(
    public modal: ModalController,
    public params: NavParams,
    public alert: AlertController,
    public http: HttpClient,
    public httpModule: HttpModule
) {    }

ionViewDidEnter() {
    this.getHolidayList()
    .then(data => {
        this.GetHolidays = data;
        console.log(data);
    });
}

getHolidayList() {
    return new Promise(resolve => {
      this.http.get(this.apiUrl).subscribe(data => {
        resolve(data);
        console.log(data);
      }, err => {
        console.log(err);
      });
    });
  }

openModal(list) {
    const myModal = this.modal.create('ModalPage', list);
    myModal.present();
}

Answer 1

您可以使用navParams将数据传递给模式。

holiday.ts

openModal(list) {
    const myModal = this.modal.create('ModalPage', {myList: list});
    myModal.present();
}

modal.ts

import { NavParams } from 'ionic-angular';
...
public list: any;

constructor(public navParams: NavParams){
   this.list = this.navParams.get("myList"); // here you use the id set in holiday.ts
}

然后在您的 modal.html

<ion-item>
    <divclass="row header">
        <div class="col">{{list.Name}}</div>
        <div class="col"> {{list.Subject}} </div>
        <div class="col">{{list.Description}}</div>
        <div class="col"> {{list.Date}} </div>
    </div>
</ion-item>