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

使用插值法{{}}显示文字“姓名1”

这样试试：

.ts

public xzh: string = "Name 1"

.html

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

Answer 2

您可以使用以下代码：

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

Ionic-Angular ：使用 ngModel 从 API 传递现有的输入字符串

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

ionic-framework

angular-ngmodel

angular