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>