Question

我正在创建一个表格，其中行是通过ngFor。

构建的

在其中一个列中我想要一个选择，它也有一个ngFor。这里的问题是，当我在select上使用ngModel时，一旦我选择了一个选项，它就会影响所有其他重复选择。试图弄清楚如何从一个选择中获取数据。

  <tr *ngFor="let data of tableData">
     <td>{{data.SystemName}}</td>
     <td>{{data.StandardName}}</td>
     <td>{{data.DBName}}</td>
     <td>{{data.ResourceName}}</td>
     <td>
       <select class="form-control"> <!--I need ngValue selected for this select-->
         <option value="" selected disabled></option>
         <option [ngValue]="fieldData" *ngFor="let fieldData of uFieldData">{{fieldData.FName}} - {{fieldData.EName}} - {{fieldData.FDataType}}</option>
        </select>
      </td>
      <td>
         <select class="form-control">
             <option value="" selected disabled></option>
             <option [ngValue]="mappingTypeData" *ngFor="let mappingTypeData of uMappingTypeData">{{mappingTypeData.Name}}</option>
          </select>
       </td>
       </tr>

Answer 1

在JavaScript中，您可以指定object.property或object['property']（Read more about this here）等属性，您可以在嵌套*ngFor

中使用Angular绑定的第二种语法

<强>组件

materials = ['glass','wood','metal'];
colours = ['green','blue','yellow'];
item = {glass: 'green', wood: 'yellow', metal: 'yellow'};

<强>模板

<div *ngFor="let material of materials">
  {{material}}
  <select [(ngModel)]="item[material]">
    <option *ngFor="let colour of colours" [ngValue]="colour">{{colour}}</option>
  </select>
</div>

item[material]将解析为item['wood']之类的资料，并根据该资料分配ngModel。

Live plunker example

如何将数据绑定到嵌套在ngFor中的选择的模型？

1 个答案: