Ionic-Angular : pass existed input string from API with ngModel

Question

I work on Ionic 5 with Angular framework.
My goal is to send values in my component with ngModel directive. Some of these values are already filled because they are coming from an external API. When I click on the submit button the values are not sent to the component file..
I have a "undefined" console message..

Here are my files :
Template :

<ion-item *ngFor="let k of api">
 <ion-input type="text" [(ngModel)]="xzh">{{k.variable0}}</ion-input> 
 <ion-input type="text" [(ngModel)]="yzh">{{k.variable1}}</ion-input> 
 <ion-button size="small" color="success" (click)="sendValues()"><ion-icon name="location-outline"></ion-icon></ion-button>
</ion-item>

Component :

public xzh: string;
[...]
 sendValues(){
      console.log(this.xzh);
 }

How could I do to pass that strings to my component, with ngModel ?

Any help would be greatly appreciated.

Answer 1

You can do using below code:

<ion-item *ngFor="let k of api; let i= index;'">
<ion-input type="text" [(ngModel)]="k.x">{{k.x}}</ion-input> 
<ion-input type="text" [(ngModel)]="k.y">{{k.y}}</ion-input> 
<ion-button size="small" color="success" (click)="sendValues(i)"><ion-icon 
name="location-outline"></ion-icon></ion-button>
</ion-item>

or in ts file you get the value of input as below:

sendValues(i){
  console.log(this.api[i].x);
  console.log(this.api[i].y);
  }