Angular 2: Programmierbare Auswahl der Option in der Combobox in allen Zeilen der Tabelle

Question

Ich entwickle eine Anwendung mit Angular 2 mit TypeScript. Ich habe die folgende Tabelle, die ausgewählte Kontrolle in einer seiner Spalte enthält. Wählen Steuerinhalte werden auf einem anderen String-Array binded -

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

Wo Klasse ein Objekt vom Typ ist {Name: string, Rubrik: string} Abschnitte ist ein String [] = [ "White", "Blau", "Lila", "Grün", "Rot"].

Wenn ich die ausgewählte Option in einer der Combobox einer Zeile ändern, wird es korrekt im Modell reflektiert. Wenn ich die Daten speichere und aktualisiere, zeigt das Auswahlsteuerelement in allen Zeilen die ausgewählte Option an, die mit der letzten Zeile in der Tabelle gespeichert wurde.

Wenn z. B. "Lila" in der letzten Zeile der Tabelle ausgewählt und gespeichert wird, wenn die Daten alle Zeilen aktualisieren, wird "Lila" als ausgewählte Option angezeigt, obwohl Model die richtigen Optionen enthält.

Kannst du mir bitte helfen, wo ich falsch liege?

Answer 1

Ich glaube, Sie so etwas wie unten suchen,

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

Hier die das hilft Plunker!!

Hoffnung ist !!