从API中获取数据，将其绑定到HTML页面，并在Ionic 6的Modal中使用相同的数据

Question

我想将数据从API传递到一个模式。这就是我所采取的步骤：

我得到这样的数据，并使用一个服务：

getData() {
    this.DataService.getDataList().subscribe(response => {
      console.log(response);
      this.ListData = response;         
    })
  }

然后，我像这样为每个元素绑定数据：

<ion-row *ngFor="let item of ListData"> 

对于每个模式，我希望显示不同的数据，因此我在openModal方法中传递Listdata，如下所示：

<ion-icon name="analytics-outline" (click)="openModal(ListData)"></ion-icon>

我的openModal方法如下所示：

 async openModal(ListData) {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: {
        "id": ListData.id,
        "modalName": ListData.name
      }
  });

我想在模态中使用相同的数据。我像这样使用NavParams：

  ngOnInit() {
    console.table(this.navParams);
    this.modelId = this.navParams.data.id;
    this.modalName = this.navParams.data.modalName;
  }

然后我想把它绑成这样：

 <ion-title>{{modalName}}</ion-title>

在完成了所有这些步骤之后，我运行了我的应用程序，但是我没有看到数据被传递，我的chrome说id和name是未定义的。

这是我的json对象，看起来像：

'{"id":"1", "name":"testtitle1", "description":"this is modal 1"}, {"id":"2", "name":"testtitle2", "description":"this is modal 2"}'

当我点击一个项目时，我想使用模式中的ID和名称。我希望以不同的方式将相同的数据绑定到图上。有人知道为什么我的数据没有显示在模态中吗？

有人能给我指明正确的方向吗？

Answer 1

您正在传递一个对象数组，而不是对象本身。

<ion-icon name="analytics-outline" (click)="openModal(ListData)"></ion-icon>

 async openModal(ListData) {
    const modal = await this.modalController.create({
      component: ModalPage,
      componentProps: {
        "id": ListData.id,
        "modalName": ListData.name
      }
  });