select list set selected item angular 2 ngModel

Question

Voici mon code actuel :

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

Je charge tous les rôles dans un tableau, et la classe d'utilisateur a un attribut Role (qui n'est pas chargé comme user.role = roles[0] mais seulement à travers les données du backend).

Le problème est que l'attribut sélectionné ne fonctionne pas et que ma sélection n'est pas dirigée vers le bon rôle. Qu'est-ce qui ne va pas ?

Answer 1

Il suffit de retirer

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

et assigner le rôle sélectionné à user.role y ngModel fera de l'élément correspondant l'élément sélectionné.

Si le role est un objet, l'instance assignée doit être identique.

Voir aussi la comparaison personnalisée récemment ajoutée https://github.com/angular/angular/issues/13268 disponible depuis la version 4.0.0-beta.7

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

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

Answer 2

Vous n'avez pas besoin d'utiliser [attr.selected] . [(ngModel)]="user.role" est une liaison de données à double sens, il sélectionnera l'option correspondante de votre liste si la valeur est égale à user.role . Et vous pouvez également utiliser des [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;\
}