设置下拉列表窗体组的默认值

Question

我的 API 中有 2 个响应数据，如下所示：列出所有角色：

{
  "content": [{
      "id": 1,
      "roleName": "admin",
    },
    {
      "id": 2,
      "roleName": "user",
    },
    {
      "id": 3,
      "roleName": "other",
    }
  ],
  "last": true,
  "totalElements": 3,
  "totalPages": 1,
  "size": 20,
  "number": 0,
  "first": true,
  "sort": null,
  "numberOfElements": 3
}

和用户信息：

{
  "id": 1,
  "userName": "admin"
  userRole[
    "id": 1,
    "roleName": "admin",
  ]
}

在 HTML 中，我想显示列表角色：

<div class="form-group">
  <label>Roles</label>
  <select formControlName="roles" class="form-control" id="roles">
    <option>{{user.userRole.roleName}}</option>
    <option *ngFor="let ls of roles">{{ls.roleName}}</option>
  </select>
</div>

但是，UI 显示：

[管理员]，[管理员]，[用户]，[其他]

我尝试使用 *ngIf 删除重复的角色：

<div class="form-group">
  <label>Roles</label>
  <select formControlName="roles" class="form-control" id="roles">
    <option>{{user.userRole.roleName}}</option>
    <option *ngFor="let ls of roles">
      <div *ngIf="user.userRole.roleName!=ls.roleName">{{ls.roleName}}</div>
    </option>
  </select>
</div>

但 UI 显示：[管理员

]，[空白]，[用户]，[其他]

请建议我正确显示列表角色。

Answer 1

我找到了用户[attr.selected]的解决方案：

 <select formControlName="roles" class="form-control" id="roles"  >
                        <option *ngFor="let rl of roles;" 
                        [attr.value]='rl.id' 
                        [attr.selected]="rl.id == desc ? true : null">
                           {{rl.roleName}}
                          </option>
                    </select>

Answer 2

<div class="form-group">
  <label>Roles</label>
  <select formControlName="roles" class="form-control" id="roles">
    <option *ngFor="let ls of roles" [selected]="ls.id === user.userRole.id">
      {{ls.roleName}}
    </option>
  </select>
</div>