NgFor 重复 div 表单并将输入分配给 NgModel

Question

我正在用 angular 制作一个表格来保存一些数据集，其中包含两个输入：名称和描述。用户可以通过按钮 "Add".

添加任意数量的数据集

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

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

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

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

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

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

但是没有用。我也试过

[(ngModel)]="dataset.name"

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

这是我的 code.

Answer 1

变化：

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

至：

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

Answer 2

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

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

NgFor 重复 div 表单并将输入分配给 NgModel

NgFor to repeat a div form and assign inputs to NgModel

forms

ngfor

angular