Ionic-Angular：使用 ngModel 傳遞來自 API 的現有輸入字符串

Question

我使用 Angular 框架在 Ionic 5 上工作。
我的目標是使用 ngModel 指令在我的組件中發送值。 其中一些值已經填充，因為它們來自外部 API。 當我單擊提交按鈕時，值不會發送到組件文件..
我有一個“未定義”的控制台消息..

這是我的文件：
模板：

<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>

零件：

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

我該如何使用 ngModel 將該字符串傳遞給我的組件？

任何幫助將不勝感激。

Answer 1

您可以使用以下代碼：

<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>

或者在 ts 文件中，你得到如下輸入的值：

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

Answer 2

使用插值{{}}顯示文本“名稱 1”

試試這樣：

.ts

public xzh: string = "Name 1"

.html

<ion-input type="text" [(ngModel)]="xzh">{{xzh}}</ion-input>