Angular 5 - 如何维护从数组列表创建的选择的 ngmodel 数组

Question

我创建一个列列表，其中列名称显示在左侧。每列包含一个提供给用户的选择框列表。

我创建了一个示例 stackblitz 你可以在哪里看到这个场景。当选择框动态创建时，我如何为每个选择框维护 ngmodel 数组。

下面是示例代码:

<select class="form-control p-2 m-2" id="exampleFormControlSelect1" [(ngModel)]="data">
      <option *ngFor="let dropdown of dropdowns" [attr.value]="dropdown">{{dropdown}}</option>

    </select>

在上面的代码中，ngModel 名称是数据，一旦设置它的值，就会为页面中存在的所有下拉列表设置它的值。我如何使用列和下拉选定值映射在数组中维护此 ngmodel

Answer 1

为了动态绑定(bind)到 ngModel，您需要稍微更改一下结构。像这样

<ng-container *ngFor="let col of columns">
  <button type="button" class="btn btn-outline-success p-2 m-2">{{col.name}}</button>

<select class="form-control p-2 m-2" id="exampleFormControlSelect1" [(ngModel)]="col.value">
      <option *ngFor="let dropdown of dropdowns"        
          [attr.value]="dropdown">{{dropdown}}</option>
    </select>
    </ng-container>

Working Example