angular - How can I bind data to model from a select that's nested inside an ngFor? -

i'm creating table rows built out via ngfor.

in 1 of columns want select, has ngfor. problem here, when use ngmodel on select, once select option affects of other repeated selects. trying figure out how data 1 select.

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

in javascript can assign properties object.property or object['property'] (read more here) can use second syntax angular's binding inside nested *ngfor

component

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

template

<div *ngfor="let material of materials">   {{material}}   <select [(ngmodel)]="item[material]">     <option *ngfor="let colour of colours" [ngvalue]="colour">{{colour}}</option>   </select> </div> 

where item[material] resolve 1 of materials item['wood'] , assign ngmodel based on that.

live plunker example