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

【问题标题】：how to generate dynamic user input without clearing fields (see GIF)如何在不清除字段的情况下生成动态用户输入（参见 GIF）
【发布时间】：2017-03-17 17:28:18
【问题描述】：

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

http://imgur.com/a/Xzgm6

相关代码：

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

有什么想法/解决方案吗？

谢谢

【问题讨论】：

this.fields.push({name: ''}) 不是将任何具有 name 属性的字段更新为空字符串吗？
啊，是的，就是这样。有关解决方法的任何建议？
@Adrianopolis 不，他正在推送一个新对象，它应该不会影响现有对象
@Dansmith12 每个输入字段名称都应该是唯一的。提交最终表格后，您将不得不决定如何处理数据。你是否打算将所有这些人放在一个列表中？也许索引名称属性？
我现在一切正常。无论如何，谢谢！

标签： angular dynamic ionic2

【解决方案1】：

我在 3 天前遇到了 exact same problem，你不能在 form 中拥有具有相同 name 属性的不同 inputs，它将继续将值绑定到最后一个输入。这应该可以解决您的问题：

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

【讨论】：

@YounesM LOL 这正是我在评论中告诉他的？问题是名称属性不是唯一的。为什么你说我不正确？
@Adrianopolis 您建议将 name 字段替换为 name='' 因为推送的对象，但事实并非如此。由于循环，所有字段都将在其中包含name = "name"，而 Angular 不允许这样做。如果不是你的意思，我可能误解了你的意思。