angular7中的预选下拉列表

时间:2019-04-16 09:44:04

标签: javascript angular typescript angular7

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

<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设置为drodown。

Sample Code

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

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:1)

检查您的usermodel属性后,我意识到它已绑定到nameitem的{​​{1}}。因此,您需要将自己的listRole属性绑定到项目(value)的name属性。

item.name

关于您的component.ts,我看不到任何明显的问题。我已通过here编辑了您的演示。