在 ngFor 中为 select 选项设置单独的模型值

Question

我正在尝试为 *ngFor 中的每个 select 选项设置模型，但如果我选择任何选项，所有选项都设置为相同的模型值。

我尝试将模型值更改为 [(ngModel)]="data.selectedItem"，但添加关卡的功能似乎无法正常工作。

HTML:

<div class="row" *ngFor="let data of levels;let index = index">
      <select [(ngModel)]="selectedItem" class="form-control input-sm custom-input-select">
      <option *ngFor="let value of columnValues">{{value}}</option>
      </select>
    </div>

请找那个笨蛋linkhere

Answer 1

在选项元素中添加 value="{{value}}" :

<option *ngFor="let value of columnValues" value="{{value}}">{{value}}
</option>

Answer 2

在选项标签中添加了 [vaue]=value（DOM 绑定）

<div class="row" *ngFor="let data of levels;let index = index">
      <select [(ngModel)]="selectedItem" class="form-control input-sm custom-input-select">
      <option *ngFor="let value of columnValues" [value]=value>{{value}}</option>
      </select>
    </div>

Answer 3

首先需要为每个级别设置SelectItem：

 addLevel(){
    let data = {selectedItem:''}
    this.levels.push(data);
  }

然后，当您在 *nfFor 中操作 DOM 时，您必须设置 trackby 选项。

<div .... *ngFor="let data of levels;let index = index; trackBy: trackByFn">

<span (click)="addLevel()">Click to Add level</span>

并绑定模型：

  <select [(ngModel)]="data.selectedItem" ....>

DEMO

在 ngFor 中为 select 选项设置单独的模型值

Set individual model values for select option inside ngFor

ngfor

angular