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

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 和名称未定义。

这是我的 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
      }
  });

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

Fetch data from API bind it to a HTML page and use the same data in the Modal in Ionic 6

html

android

json

ionic-framework

angular