Отобразить выбранные данные строки на модальной странице, используя ionic 3

Question

У меня есть список, который загружается из базы данных с помощью rest API, на первой странице я отображал только два поля name и subject. Когда я щелкаю по строке на модальной странице, мне нужно отобразить данные выбранной строки.

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>

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>