Raj Raj - 3 months ago 57
TypeScript Question

Angular 2: Programitically selecting option in combobox in all the rows in table

I am building an application using Angular 2 with TypeScript. I have the following table that contains select control in one of its column. Select control contents are binded to another string array -

<table ngControl="lstClasses" name="lstClasses">
<tr *ngFor="let class of model.Classes">
<td>{{class.Name}}</td>
<td>
<select name="cmbSection" [(ngModel)]="class.Section">
<option *ngFor="let section of sections"
[ngValue]="section">
{{section}}
</option>
</select>
</td>
</tr>
</table>


Where Class is an object of type {Name: string, Section: string}
sections is a string[] = ["White", "Blue", "Purple", "Green", "Red"].

When I change the selected option in any of the combobox of any row, it get reflected correctly in model. When I save and refresh the data, all the select control in all rows shows the selected option that was saved with the last row in the table.

E.g if I select "Purple" in last row of the table and save it, when the data refreshes all the rows show "Purple" as selected option, even though Model contains correct options.

Can you please help where I going wrong in this.

Answer

I think you are looking something like below,

 <option *ngFor="let section of sections"
                    [value]="section"
                    [selected]="section == class.Section"
                    >
                    {{section}}
 </option>

Here is the Plunker!!

Hope this helps!!