Question

我在创建动态用户输入字段时遇到问题。每当我生成一个新字段时，字段内的所有内容都会消失。我将提供截图来说明问题。

相关代码：

HTML：

  <ion-item *ngFor="let field of fields">
    <ion-label fixed>Destination </ion-label>
    <ion-input type="text" [(ngModel)]="field.name" name="name"></ion-input>
  </ion-item>
  <button  ion-button color="light" icon-right (click)="addDestination()" >
      Add Destination
      <ion-icon name="add" ></ion-icon>
  </button>

打字稿：

export class HomePage {
  fields: any;
  public destination1;
  public destination2;
  public destinations = [];

  constructor(public navCtrl: NavController) {
    this.fields = [];
  }

  addDestination(){
    this.fields.push({name: ''});
  }
}

任何想法/解决方案？

由于

Answer 1

我在3天前遇到了exact same problem，你不能在input内使用相同name属性的form不同，它会将值绑定到最后一个输入。这应该可以解决您的问题：

<ion-item *ngFor="let field of fields;let id = index">
    <ion-label fixed>Destination </ion-label>
    <ion-input type="text" [(ngModel)]="field.name" name="name-{{id}}"></ion-input>
  </ion-item>
  <button  ion-button color="light" icon-right (click)="addDestination()" >
      Add Destination
      <ion-icon name="add" ></ion-icon>
  </button>

如何在不清除字段的情况下生成动态用户输入（请参阅GIF）

1 个答案: