選択リストセット選択した項目の角2 ngModel

Question

これは私の現在のコードです：

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

私は、アレイ内のすべてのロールをロードしていて、ユーザークラスがuser.role = roles[0]のようにロードされていない役割の属性を（持っていますバックエンドデータを介して）。

問題は、選択した属性が機能しておらず、選択が正しい役割になっていないことです。私は間違って何をしていますか？

Answer 1

だけ一致する項目選択は1になります

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

を削除し、user.roleとngModelに選択したロールを割り当てます。

roleがオブジェクトの場合、割り当てられたインスタンスは同一である必要があります。

はあなたが[attr.selected]を使用する必要はありません。また、最近追加されたカスタム比較https://github.com/angular/angular/issues/13268 4.0.0-beta.7以降で利用可能

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

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

Answer 2

を参照してください。 [(ngModel)]="user.role"は双方向データバインディングであり、値がuser.roleの場合、リストから一致するオプションが選択されます。そして、あなたはまた、基本的な[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;\ 
}