選擇與角2

Question

對組合框綁定值。請告訴我如何解決這個問題：

我有一個通過API連接到數據庫的Web應用程序。我有一個名爲user-save-component的表單，我可以在其中添加和編輯用戶。用戶有兩個角色：管理員和用戶。我想在編輯用戶時選擇正確的角色。

user.role有2個值：「ROLE_ADMIN」和「ROLE_USER」，我試了好幾次，但沒有想法，如果我做錯了什麼，或者是Angular2的一個bug：

的html代碼：

<select class="form-control margin-bottom" [(ngModel)]="user.role"> 
       <option value="ROLE_ADMIN" [selected]="user.role =='ROLE_ADMIN'">admin</option> 
      <option value="ROLE_USER" [selected]="user.role =='ROLE_USER'">user</option> 
      </select> 

但不要緊，我怎麼寫，總是選擇第一個項目：

<option value="ROLE_USER" [selected]="selected">user</option> or 

<option value="ROLE_USER" [selected]="true">user</option> or 
<option value="ROLE_USER"selected>user</option> 

Answer 1

嘗試修改模板一樣

<select class="form-control margin-bottom" [(ngModel)]="user.role"> 
    <option value="ROLE_ADMIN" [attr.selected]="user.role =='ROLE_ADMIN'">admin</option> 
    <option value="ROLE_USER" [attr.selected]="user.role =='ROLE_USER'">user</option> 
</select> 

Answer 2

你正在使用非常簡單和靜態的方式來玩select control。 我建議你去與更多Angular2方式，

DEMO : How to use select control in Angular2 with ngFor

<select class="form-control margin-bottom" [(ngModel)]="user.role"> 
     <option *ngFor="let val of user" 
       [value]="val.role" 
       [attr.selected]="val.role"> 
       {{val.name}} 
     </option> 
</select> 

---

export class App { 
    user=[{role:"ROLE_ADMIN",name:"Admin"},{role:"ROLE_USERR",name:"User"}]; 

    constructor(){ 
    this.user.role=this.user[1].role; 
    } 
} 

Answer 3

剛分配到ROLE_ADMINuser.role，則選擇將其顯示爲初始值

<select class="form-control margin-bottom" [(ngModel)]="user.role"> 
    <option value="ROLE_ADMIN">admin</option> 
    <option value="ROLE_USER">user</option> 
</select> 

或將其分配給selected，並將其更改分配給user.role。

<select class="form-control margin-bottom" [(ngModel)]="selected" (ngModelChange)="user.role = $event"> 
    <option value="ROLE_ADMIN">admin</option> 
    <option value="ROLE_USER">user</option> 
</select>