在发布之前，已在Angular2的各个版本中多次询问了此问题的味道。但是，我还没有找到任何能够在期望的情况下产生所需行为（缺少我想避免的解决方法）的东西：选择对象问题
我的表单选择具有通过[[ngModel）]与对象的2种方式绑定，然后通过* ngFor为类似对象的列表（均由id区分）生成“选项”。在我的研究中，多次提到Angular2使用JavaScript对象等效项（按实例），因此绑定模型中没有相同实例的对象将与列表不匹配。因此，它不会显示为“选定”项-破坏了“ 2-way”数据绑定。
但是，我想为这些实例定义一种匹配方法。已经尝试了一些似乎在Internet上四处传播的解决方案，但我要么错过了一小部分，要么实现不正确。
我要避免的选项：
理想情况下（似乎已经在有解决方案的多个地方进行了讨论（在我的情况下解决方案是不够的）），有可能为ngModel定义一个相等的标准，以代替对象实例相等。
即下面的最新尝试，其中h.id == a.id定义属性“ selected”。我不明白的是为什么此“ selected”属性无法呈现-ngModel是否以某种方式阻止了它？在HTML中手动设置selected ='true'似乎可以解决，但是使用[attr.selected]或其他任何构建ng-reflect-selected ='true'属性的变体生成似乎并不能解决问题。
<div *ngFor='let a of activePerson.hobbyList ; let i=index; trackBy:a?.id'>
<label for='personHobbies'>Hobby:</label>
<select id='personHobbies' class='form-control'
name='personHobbies' [(ngModel)]='activePerson.hobbyList[i]' #name='ngModel'>
<option *ngFor='let h of hobbyListSelect; trackBy:h?.id'
[ngValue]='h'
[attr.selected]='h.id == a.id ? true : null'
>
{{h.name}}
</option>
</select>
</div>
我尝试过的一些事情：
我已经成功实现了呈现如下所示的HTML：
<select ...>
<option selected='true'>Selected</option>
<option selected='false'>Not Selected</option>
<!-- and variants, excluding with selected=null-->
</select>
但是当对象实例不同时，仍然没有选定的值。我还尝试删除当用户选择一个值（ngModel的处理方式以及可能用于处理的其他选项）时，试图找出HTML或CSS中的哪个元素正在记录所选的值。
任何帮助将不胜感激。目标是获得“更改”按钮来更改基础模型并相应地更新选择框-我将尝试的重点放在了“ hobbyList”上。我已经尝试过Firefox和Chrome。谢谢！
每个@Klinki
当前在angular 2中没有简单的解决方案，但是在angular 4中，自beta 6起，使用
compareWith- 已解决-参见https://github.com/angular/angular/pull/13349
为了说明所建议的情况的用法（请参阅plunk）：
<div *ngFor='let a of activePerson.hobbyList ; let i=index;'>
<label for='personHobbies'>Hobby:</label>
<select id='personHobbies' class='form-control'
name='personHobbies' [(ngModel)]='activePerson.hobbyList[i]'
[compareWith]='customCompareHobby'>
<option *ngFor='let h of hobbyListSelect;' [ngValue]='h'>{{h.name}}</option>
</select>
</div>
...
customCompareHobby(o1: Hobby, o2: Hobby) {
return o1.id == o2.id;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句