小编col*_*ole的帖子

在发布之前,已经在Angular2的各种版本中多次询问过这个问题的味道.但是,我还没有找到任何可以产生所需行为的东西(我想避免的缺少解决方法):选择对象问题

我的表单选择通过[(ngModel)]与对象进行双向绑定,然后通过*ngFor生成"选项"以获取类似对象的列表(全部由id区分).在我的研究中,已多次提到Angular2使用JavaScript对象等效(通过实例),因此绑定模型中没有相同实例的对象将与列表不匹配.因此,它不会被呈现为"选定"项 - 打破"双向"数据绑定.

但是,我想为这些实例定义一种匹配方式.已经尝试了一些似乎在互联网上浮动的解决方案,但我要么丢失了一小块,要么实施不当.

我想避免的选项:

• 绑定到ngModel中除对象(即id)之外的其他内容.ngValue是我想要使用的一个很好的帮助
• 通过更改处理程序进行解决方法
• 强制实例匹配(我从数据服务获取对象,并且不想重新定义它们以匹配......这似乎是不必要的资源浪费)

理想情况下(这似乎已经在几个有解决方案的地方进行了讨论 - 在我的情况下解决方案不足),有可能为ngModel定义一个相等的标准来代替对象实例相等.

即下面的最新尝试,其中h.id == a.id定义属性"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>

我试过的一些事情:

• trackBy
• 绑定到[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如何处理,以及可能有哪些其他选项用于处理).

任何帮助将不胜感激.目标是获取"更改"按钮以更改基础模型并相应地更新选择框 - …