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

【问题标题】：Angular 5 - How to maintain an array of ngmodel for the select created from list of arrayAngular 5 - 如何为从数组列表创建的选择维护 ngmodel 数组
【发布时间】：2018-04-26 09:33:02
【问题描述】：

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

我创建了一个示例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

【问题讨论】：

标签： angular

【解决方案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

【讨论】：

【解决方案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]中的输入编号获取你的动态数据数据。

【讨论】：