Question

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

为此，我创建了一个用一个元素（ 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

2 个答案: