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

Question

I'm creating a table where the rows are built out via an ngFor.

In one of the columns I want a select, that also has an ngFor. The problem here, is when I use an ngModel on the select, once I select an option it affects ALL of the other repeated selects. Trying to figure out how to get data from one 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 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>

@0mpurdy I'm just trying to store the value of the select into the component to use with TS so I can send a post to my database. Maybe I used model wrong, I assumed component is model. — KP714, Jul 26 '17 at 00:12
Then [this question](https://stackoverflow.com/questions/35945001/binding-select-element-to-object-in-angular-2) might be what you're looking for — 0mpurdy, Jul 26 '17 at 00:15
I'm able to get the value in the option text using (change)="changeField($event.target.value) but $event.target.value only gives me the text, I want to whole item in the ngFor (fieldData) — KP714, Jul 26 '17 at 00:17
Does [this plunker example](https://plnkr.co/edit/ySTI3qja9c3wrBu9s599?p=preview) answer your question? — 0mpurdy, Jul 26 '17 at 00:22
@0mpurdy no, both of those only have one ngFor. the rows in my are made via an ngFor. Inside each row, is a column that has a select with its own ngFor. Therefore, each row has a select (each has the same options from the ngFor in the selects - which is correct). If I use a straight up ngModel, all the selects share the same ngModel and once I change one, all of them then display what was selected in one select — KP714, Jul 26 '17 at 00:29
What about [now that I've updated it](https://plnkr.co/edit/ySTI3qja9c3wrBu9s599?p=preview) to include nesting? — 0mpurdy, Jul 26 '17 at 00:33
@0mpurdy you actually got it, if you remove [material] from item[material] you run into the error I'm having. Can you explain this a bit. I assume this works since Item is an object and the [Material] matches the objects in Item? — KP714, Jul 26 '17 at 00:50
@0mpurdy thanks! I just need to figure out how to use this, since yours is pretty simple. My first ngFor might have anywhere from 5-50 rows depending on the clients data, and I might not touch all the selects. Plus, my selects might have less options than rows so less in the index. I might need to try using the index of each ngFor and use an array or something — KP714, Jul 26 '17 at 00:53

score 0 · Accepted Answer · answered Jul 26 '17 at 00:54

In JavaScript you can assign properties like object.property or object['property'] (Read more about this here) you can use the second syntax with Angular's binding inside a 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] will resolve to one of the materials like item['wood'] and assign the ngModel based on that.

Live plunker example

You're answer helped me get to a solution. I created an empty array. In the parent ngFor I added a "let y = index". In the child ngFor, I used an ngModel similar to yours [(ngModel)]='selectedField[y]' and now the whole stored without affecting the other selects fields. Thanks! — KP714, Jul 26 '17 at 17:11

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

1 Answers1