Auswahlliste Satz ausgewähltes Element Winkel 2 ngModel

Question

Dies ist mein aktueller Code:

<select name="role" [(ngModel)]="user.role"> 
    <option *ngFor="let role of roles" [ngValue]="role" [attr.selected]="role == user.role ? 'true' : 'false'">{{role.name}}</option> 
</select> 

Ich lade alle Rollen in einem Array und die Benutzerklasse verfügt über ein Rollenattribut (die nicht wie user.role = roles[0] geladen wird aber nur durch die Backend-Daten).

Das Problem ist, dass das ausgewählte Attribut nicht funktioniert, und meine Auswahl nicht die richtige Rolle geht. Was mache ich falsch?

Answer 1

Gerade

[attr.selected]="role == user.role ? 'true' : 'false'" 

entfernen und die ausgewählte Rolle user.role zuweisen und ngModel wird das passende Element des ausgewählten machen.

Wenn ein Objekt ist, muss die zugewiesene Instanz identisch sein.

Siehe auch die kürzlich hinzugefügten benutzerdefinierten Vergleich https://github.com/angular/angular/issues/13268 verfügbar seit 4.0.0-beta.7

<select [compareWith]="compareFn" ... 

compareFn(val1, val2): boolean { 
    return val1 && val2 ? val1.id === val2.id : val1 === val2; 
} 

Answer 2

Sie brauchen nicht [attr.selected] zu verwenden. [(ngModel)]="user.role" ist Zwei-Wege-Datenbindung, es wird die passende Option aus Ihrer Liste auswählen, wenn der Wert gleich user.role ist. Und Sie können auch Grund verwenden [value]

<select name="role" [(ngModel)]="user.role"> 
    <option *ngFor="let role of roles" [value]="role">{{role.name}}</option> 
</select> 

Answer 3

<select [ngModel]="selectedDevice" (ngModelChange)="onChange($event)" name="sel2"> 
    <option [value]="i" *ngFor="let i of devices">{{i}}</option> 
</select> 

onChange(newValue) { 
    console.log(newValue); 
    this.selectedDevice = newValue;\ 
}