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

Issue

I want to pass data from an API to a modal. This is the steps I've Taken:

I get the data like this and use a service for it:

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

Then I bind this data like this for each element:

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

For each modal I want to display the data different so I pass the Listdata in the openModal method like this:

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

My openModal method looks like this:

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

I want to use the same data inside the modal. I use NavParams like this:

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

And then I wanna bind it like this:

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

After all these steps I run my app, but I don't see that the data is passed and my chrome dev says that id and name is undefined.

This is my json object look like:

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

I want to use the ID and the name in the modal when I click on a item. The same data I want to bind it differently for example to a graph. Does anybody know why my data isn't shown in the modal?

Can someone point me in the right direction?

Solution

You are passing an array of object instead of the object itself.

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

Answered By - slashsharp