angular7中的预选下拉列表

Question

我有此表格用于编辑用户信息：

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

将此代码用于setvalue形式：

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

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

对于例如用户具有manager角色，但是并没有将manager设置为下降。

样例代码

我如何在下拉菜单中设置用户的值。

Answer 1

为什么不绑定所选属性。

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

Answer 2

检查usermodel属性后，我意识到它已绑定到listRole的item name 。 因此，您将需要将您的value属性绑定到item（ item.name ）的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，我看不到任何明显的问题。 我在这里编辑了您的演示。