How to send id as per onclick on that card to next page

I’m trying to send onclick id to the next page. i’m able to send only specific id to next page like using below code:
this.navCtrl.push(ChecklistPage, { checklisttNo: this.resposeData[0].project_id }); but it will send only 0th index code then how to send any id that i clicked

[
{
“project_id”: “8”,
“name”: “Columbia Asia”,
“img”: “”
},
{
“project_id”: “7”,
“name”: “test4”,
“img”: “http://146.66.92.93/~advent37/QualityControl/uploads/project_logo/Logo_w_o_theme_lowres.png
},
{
“project_id”: “6”,
“name”: “test3”,
“img”: “”
},
{
“project_id”: “5”,
“name”: “test2”,
“img”: “”
},
{
“project_id”: “4”,
“name”: “test1”,
“img”: “”
},
{
“project_id”: “3”,
“name”: “KSB tech”,
“img”: “”
},
]

Is there any solution

In HTML

ex:

<div *ngFor="let project of resposeData">   // iterating through each responseData
<ion-item  (click)="onSelectID(project.project_id)">{{project.name}}</ion-item>//Just displaying name(you can replace with your own logic ), onclick of name sending project ID to the ts file.
</div>

In TS
onSelectID(id:number){
this.navCtrl.push(ChecklistPage, { checklisttNo: id })
}

check with it

your data

project_list = [
{
"project_id": "8",
"name": "Columbia Asia",
"img": ""
},
{
"project_id": "7",
"name": "test4",
"img": "http://146.66.92.93/~advent37/QualityControl/uploads/project_logo/Logo_w_o_theme_lowres.png"
},
{
"project_id": "6",
"name": "test3",
"img": ""
},
{
"project_id": "5",
"name": "test2",
"img": ""
},
{
"project_id": "4",
"name": "test1",
"img": ""
},
{
"project_id": "3",
"name": "KSB tech",
"img": ""
},
]

add in your html

<div style="margin-bottom:20px;" *ngFor="let x of project_list">
      <ion-card (click)="sendid(x.project_id)">
        <ion-card-content>
          <p class="pera">
            {{ x.name }} <br>
            <small>{{ x.img }} </small>
            <ion-icon class="icon" name="arrow-forward"></ion-icon>
          </p>
        </ion-card-content>
      </ion-card>
  
    </div>

and then add in your ts file

sendid(x){
  console.log(x);
  this.navCtrl.push(ChecklistPage, { checklisttNo: x })
}

then fetch id in your ChecklistPagepage

geprojectid  = this.navParams.get('checklisttNo');

i hope its helpful for you @pt2609