select 列表集 selected 项目 angular 2 ngModel

Question

这是我当前的代码：

<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>

我正在加载一个数组中的所有角色，用户 class 有一个 Role 属性（它不像 user.role = roles[0] 那样加载，而是通过后端数据加载）。

问题是 selected 属性不起作用，我的 select 没有转到正确的角色。我做错了什么？

Answer 1

只需删除

[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;
}

Answer 2

您不需要使用 [attr.selected]。 [(ngModel)]="user.role" 是 two-way data-binding，如果值等于 user.role，它将 select 从您的列表中匹配的选项。你也可以使用基本的 [value]

<select name="role" [(ngModel)]="user.role">
    <option *ngFor="let role of roles" [value]="role">{{role.name}}</option>
</select>

Answer 3

<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;\
}

select 列表集 selected 项目 angular 2 ngModel

select list set selected item angular 2 ngModel

angular2-forms

angular2-ngmodel

angular