NgFor 重复一个 div 表单并将输入分配给 NgModel答案

【问题标题】：NgFor to repeat a div form and assign inputs to NgModelNgFor 重复一个 div 表单并将输入分配给 NgModel
【发布时间】：2018-06-22 18:22:27
【问题描述】：

我正在做一个带有角度的表单来保存一些带有两个输入的数据集：名称和描述。借助“添加”按钮，用户可以添加任意数量的数据集。

为了做到这一点，我创建了一个使用一个元素 (app.component.ts) 初始化的数据集列表。然后，使用 NgFor 根据数据集列表中元素的数量生成数据集的数量。

<div *ngFor="let dataset of datasetList; let index = index">

我还有一个索引变量来删除列表中的一个元素。

但是，我没有成功保存不同的数据集。它只保存最后一个。我知道它来自html代码中的[(ngModel)]。

但我不知道如何将此值分配给列表中的正确元素。我试过了

 [(ngModel)]="datasetList[index].name"

但它不起作用。我也尝试过

[(ngModel)]="dataset.name"

但结果相同。我想我需要让它们独一无二。

这是我的code。

【问题讨论】：

标签： angular forms ngfor

【解决方案1】：

变化：

 addDataset() {
    this.datasetList.push("");
  }

到：

addDataset() {
    this.datasetList.push({});
  }

【讨论】：

【解决方案2】：

回答我的问题。 cezn 的解释是正确的并且有效。但是，在那之后，无论如何您都需要使名称和 [(ngModel)] 唯一。可以这样做：

<div *ngFor="let dataset of datasetList;let index = index;">
  <input name=name{{index}} [(ngModel)]="datasetList[index].name" placeholder="item">
</div

【讨论】：