5

这是我当前的代码:

<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],而是通过后端数据加载)。

问题是 selected 属性不起作用,我的选择没有发挥正确的作用。我究竟做错了什么?

4

3 回答 3

6

只需删除

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

并将选定的角色分配给user.role并且ngModel将使匹配的项目成为选定的项目。

如果role是对象,则分配的实例需要相同。

另请参阅最近添加的自定义比较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;
}
于 2017-02-14T11:35:07.630 回答
3

你不需要使用[attr.selected]. [(ngModel)]="user.role"是双向数据绑定,如果值等于 ,它将从您的列表中选择匹配的选项user.role。你也可以使用基本的[value]

<select name="role" [(ngModel)]="user.role">
    <option *ngFor="let role of roles" [value]="role">{{role.name}}</option>
</select>
于 2017-02-14T11:35:15.350 回答
0
<select [ngModel]="selectedDevice" (ngModelChange)="onChange($event)" name="sel2">
    <option [value]="i" *ngFor="let i of devices">{{i}}</option>
</select>

onChange(newValue) {
    console.log(newValue);
    this.selectedDevice = newValue;\
}
于 2017-02-14T11:40:44.793 回答