从生成的输入中获取 ng 的价值

Question

我正在用 Ionic 框架做一个应用程序，到目前为止我有 *ngFor 生成的输入，我想在单击按钮后获取每个输入的值。我试过反应式表单，但没能成功。

<ion-list>
  <ion-item *ngFor="let item of players; index as i">
    <ion-chip>
     <ion-input placeholder="Nombre jugador {{i+1}}"  type="text"></ion-input>
     <ion-icon name="person-add"></ion-icon>
   </ion-chip>
 </ion-item>
<br />
</ion-list>

和我的 .ts 文件。

 ngOnInit() {
  this.getJugadores();
 }

getJugadores(){
  this.storage.get("num_players").then(x =>{
    if (x){
      this.players = new Array(x);
    }else{
      console.log("error");
    }
  });
}

我想将每个值存储在一个对象数组中。

Answer 1

使用 Angular，将数据 get/set 到表单的最简单方法之一就是简单地使用 [(ngModel)] 数据绑定。

1) 为您的数据定义一个结构。如果您有多个输入，请考虑定义一个数组。

2) 使用 [(ngModel)].

绑定到该结构

以下是一些可能有用的信息：https://angular.io/guide/template-syntax#binding-syntax-an-overview

模板代码

  <div *ngFor="let item of players; index as i">
     <input placeholder="Nombre jugador {{i+1}}"  type="text"
            [(ngModel)]="item.name"/>
 </div>

组件代码

  players: Player[] = [];

  ngOnInit() {
    // Call a service to get data
    // Hardcoded here as an example
    this.players = [
      {id: 1, name: "Joe"},
      {id:2, name: "Stefan"}
    ]
  }

接口代码

export interface Player {
  id: number,
  name: string
}

我这里有一个工作示例：https://stackblitz.com/edit/angular-b5uppm

从生成的输入中获取 ng 的价值

Get value from ng for generated inputs

ngfor

angular

ionic4