选择列表设置选定项目角度2 ngModel

发布时间：2020-12-17 06:49:05 所属栏目：安全来源：网络整理

导读：这是我目前的代码： select name="role" [(ngModel)]="user.role" option *ngFor="let role of roles" [ngValue]="role" [attr.selected]="role == user.role ? 'true' : 'false'"{{role.name}}/option/select 我正在加载数组中的所有角色,并且用户类具有Rol

这是我目前的代码：

<select name="role" [(ngModel)]="user.role">
    <option *ngFor="let role of roles" [ngValue]="role" [attr.selected]="role == user.role ? 'true' : 'false'">{{role.name}}</option>
</select>

我正在加载数组中的所有角色,并且用户类具有Role属性(不像user.role = roles [0]那样加载,而只是通过后端数据加载).

问题是所选属性不起作用,而我的选择不会转到正确的角色.我究竟做错了什么？

解决方法

只需删除

[attr.selected]="role == user.role ? 'true' : 'false'"

并将所选角色分配给user.role,ngModel将使匹配项成为选定项.

如果角色是对象,则分配的实例必须相同.

另请参阅最近添加的自定义比较https://github.com/angular/angular/issues/13268
从4.0.0-beta.7开始提供

<select [compareWith]="compareFn" ...

compareFn(val1,val2): boolean {
  return val1 && val2 ? val1.id === val2.id : val1 === val2;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!