选择列表集合中选择的项目的角2 ngModel

这是我的当前代码：选择列表集合中选择的项目的角2 ngModel

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

我加载所有角色在阵列中，并且用户类有一个角色属性（其未加载状user.role = roles[0]但只是通过后端数据）。

问题是选定的属性不起作用，我的选择没有去正确的角色。我究竟做错了什么？

来源

2017-02-14 JDOE

只是删除

[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-14 11:35:07

谢谢你，是有道理的，这是行不通的，因为对象是不一样的参考。我可以为此使用'ngComparator'吗？或者语法是什么？ – JDOE

我更新了我的答案。它应该包含在4.0.0-beta.7中 –

只有一个问题，你测试了吗？我尝试过，但无法使用'[compareWith]'函数工作。显然我的'val2'总是为空=/ – JDOE

使用[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-14 11:35:15

[ngValue]的文档在哪里？我没有找到它。我应该什么时候使用它？ –

<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-14 11:40:44

选择列表集合中选择的项目的角2 ngModel

回答

相关问题