lista wyboru zestaw wybrana pozycja kątowa 2 ngModel

Question

To jest mój bieżący kod:

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

Ja ładuje wszystkie role w tablicy, a klasa użytkownik posiada atrybut rolę (który nie jest załadowany jak user.role = roles[0] ale tylko poprzez dane backendu).

Problem polega na tym, że wybrany atrybut nie działa, a mój wybór nie ma właściwej roli. Co ja robię źle?

Answer 1

Wystarczy usunąć

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

i przypisać wybraną rolę user.role i ngModel uczyni zgodnego elementu wybrany jeden.

Jeśli obiekt jest obiektem role, przypisana instancja musi być identyczna.

Zobacz także ostatnio dodane porównania, niestandardowej https://github.com/angular/angular/issues/13268 dostępny od 4.0.0-beta.7

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

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

Answer 2

nie trzeba używać [attr.selected]. [(ngModel)]="user.role" jest dwukierunkowe powiązanie danych, wybierze dopasowaną opcję z listy, jeśli wartość jest równa user.role. Można także użyć podstawowy [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;\ 
}