javascript - angular2 ngModel/ngValue 选择选项对象 - 不同实例之间的平等

Question

这个问题的风格在发布之前已经在 Angular2 的各种版本中被问过很多次。但是，我还没有在此处的 plunk 中找到任何会产生所需行为(缺乏我想避免的解决方法)的东西:Select Object Problems

我的表单选择通过 [(ngModel)] 绑定(bind)到一个对象，然后通过 *ngFor 生成“选项”以获得类似对象的列表(全部由 id 区分)。在我的研究中，多次提到 Angular2 使用 JavaScript 对象等效(按实例)，因此绑定(bind)模型中没有相同实例的对象将不会与列表匹配。因此，它不会显示为“选定”项目 - 打破了“双向”数据绑定(bind)。

但是，我想为这些实例定义一种匹配方式。已经尝试了一些似乎在互联网上流传的解决方案，但我要么遗漏了一小部分，要么实现不正确。

我想避免的选项:

• 绑定(bind)到 ngModel 中对象以外的东西(即 id)。 ngValue 是一个很好的帮助，我想利用它
• 通过变更处理程序解决问题
• 强制实例匹配(我正在从数据服务中获取对象，并且不想重新定义它们以匹配...这似乎是不必要的资源浪费)

理想情况下(这似乎已经在几个有解决方案的地方尽可能地讨论过 - 在我的情况下解决方案不充分)，可以为 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>

我尝试过的一些事情:

• 跟踪
• 绑定(bind)到 [selected]=、selected={{}} 和 [attr.selected](这看起来很接近)

我已经成功地实现了如下所示的渲染 HTML:

<select ...>
    <option selected='true'>Selected</option>
    <option selected='false'>Not Selected</option>
    <!-- and variants, excluding with selected=null-->
</select>

但当对象实例不同时仍然没有选择值。我还尝试找出当用户选择一个值时 HTML 或 CSS 中的哪个元素正在记录所选值(ngModel 如何处理，以及可能有哪些其他处理选项)。

如有任何帮助，我们将不胜感激。目标是获得“更改”按钮以更改基础模型并相应地更新选择框 - 我将我的尝试集中在“hobbyList”上。我已经在 Firefox 和 Chrome 上试过了。谢谢!

Answer 1

来自@Klinki

Currently there is no simple solution in angular 2, but in angular 4 this is already addressed since beta 6 using compareWith - see https://github.com/angular/angular/pull/13349

为了说明建议案例 ( see 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;
}