How can i property bind each object of a for loop to the respective dom element?

Question

I would like to have something similar to this:

<select>
  <option [bound]="items[i]" *ngFor="let item of items; #i = index">{{item}}</option>
</select>

Answer 1

I now use:

<select [(ngModel)]="selectedItem">
  <option [ngValue]="item" *ngFor="let item of items">{{item}}</option>
</select>

You can use:

<select [(ngModel)]="selectedItem" (ngModelChange)="onItemSelected(selectedItem)">
  <option [ngValue]="item" *ngFor="let item of items">{{item}}</option>
</select>

to detect changes.

[ngValue] allows to bind complex objects, see here.

Answer 2

I think you should bind item or i to [value]. Also # is prohibited. and you're lacking of [(ngModel)] on your <select>.

Take a look at Forms in angular docs, especially here: Add Powers with *ngFor.

Answer 3

I Would use something like this:

<select [(ngModel)]="currValue" >
    <option *ngFor="let item of items" [value]="item.value"> {{ item.name }} </option>
</select>

With items being an array of objects(value, name).