首页 文章

NgFor重复一个div表格并为NgModel分配输入

提问于
浏览 次
1

我正在做一个带有角度的表单来保存一些带有两个输入的数据集：名称和描述 . 由于“添加”按钮，用户可以添加他想要的数据集 .

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

2 回答

  • 0

    更改：

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

    至：

    addDataset() {
    this.datasetList.push({});
  }
    回复于
  • 1

    回答我的问题 . 塞兹解释的是正确的，有效的 . 但是，之后你需要使名称和[（ngModel）]无论如何都是唯一的 . 这可以这样做：

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

相关问题