Question

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

我尝试将模型值更改为[(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>

请找到plunker链接here

Answer 1

首先，您需要为每个级别设置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

Answer 2

在选项元素中添加值=＆＃34; {{value}}＆＃34;

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

Answer 3

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

<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>

为ngFor中的选择选项设置单个模型值

3 个答案: