选择与角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>