angular - Angular 6 select：设置初始值

Question

我有以下代码

<select name="role" [(ngModel)]="user.role">
    <option *ngFor="let r of roles" [ngValue]="r">{{r.name}}</option>
</select>

其中角色是一个对象：

[{"id":1, "name":"user"}, {"id": 2, "name":"admin"}]

和 user.role 是例如：

{"id":1, "name":"user"}

我希望初始值为 user.role，我尝试了很多类似 ngInit 的方法，但没有完成工作。

标签： angularselect

Answer 1

您可以尝试使用此解决方案。

我在Stackblitz上创建了一个演示

使用 [compareWith]="compareObjects" 在选择中使用对象

组件.html

<select name="role" [compareWith]="compareObjects" [(ngModel)]="user.role">
    <option *ngFor="let r of roles" [ngValue]="r">{{r.name}}</option>
</select>

组件.ts

  user = {
    role: { "id": 1, "name": "user" }
  }
  roles = [
    { "id": 1, "name": "user" }, 
    { "id": 2, "name": "admin" }
  ]

  compareObjects(o1: any, o2: any): boolean {
    return o1.id === o2.id && o1.name === o2.name;
  }