Question

请告诉我如何解决问题：

我有通过API连接到数据库的Web应用程序。我有一个名为user-save-component的表单，我可以添加和编辑用户。用户有2个角色：admin和user。我想在编辑用户时选择正确的角色。

user.role有2个值：＆＃34; ROLE_ADMIN＆＃34;和＆＃34; ROLE_USER＆＃34;，我试了好几次但是不知道我做错了什么或者是Angular2的错误：

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_ADMIN分配给user.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>

使用Angular 2在组合框上选择绑定值

3 个答案: