javascript - Angular7 中的预选下拉菜单

Question

我有这个表单用于编辑用户信息:

<form [formGroup]="editUSer">
  <input formControlName="name">
<select formControlName="roleName">
  <option *ngFor="let item of listRole">{{item.name}}</option>
</select>
</form>

使用此代码设置表单中的值:

this.editUSer.setValue({
  name:this.usermodel.name,
  roleName:this.usermodel.roleName
})

但我需要设置下拉用户值。

对于 exmaple 用户具有 manager Angular 色，但未在 drodown 中设置 manager 。

Sample Code

如何在下拉列表中设置用户的值。

Answer 1

检查您的 usermodel 属性后，我发现它已绑定(bind)到 listRole 中 item 的 name >。因此，您需要将 value 属性绑定(bind)到项目的 name 属性 (item.name)。

<form [formGroup]="editUSer">
  <input formControlName="name">
  <select formControlName="roleName">
    <option *ngFor="let item of listRole" [value]="item.name">{{item.name}}</option>
  </select>
</form>

至于你的 component.ts，我没有看到任何明显的问题。我已经编辑了您的演示 here .