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

为了动态绑定到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

Answer 2

为了避免更改ngModel，您可以将数据推送到数组，如下所示：

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

这样，您可以使用ts文件data[i]中的输入数量获取动态数据数据，而无需更改模型。