使用 ionic 3 在模态页面中显示选定的行数据答案

【问题标题】：Display selected row data in Modal page using ionic 3使用 ionic 3 在模态页面中显示选定的行数据
【发布时间】：2019-04-03 03:30:38
【问题描述】：

我有一个使用 rest API 从数据库加载的列表，在第一页我只显示了两个字段名称和主题。当我单击模态页面中的行时，我需要显示选定的行数据。

holiday.html

<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>

holiday.ts

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();
}

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

modal.html

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

【问题讨论】：

标签： angularjs typescript ionic3

【解决方案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>

【讨论】：