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

油菜:

在发布之前,已在Angular2的各个版本中多次询问了此问题的味道。但是,我还没有找到任何能够在期望的情况下产生所需行为(缺少我想避免的解决方法)的东西:选择对象问题

我的表单选择具有通过[[ngModel)]与对象的2种方式绑定,然后通过* ngFor为类似对象的列表(均由id区分)生成“选项”。在我的研究中,多次提到Angular2使用JavaScript对象等效项(按实例),因此绑定模型中没有相同实例的对象将与列表不匹配。因此,它不会显示为“选定”项-破坏了“ 2-way”数据绑定。

但是,我想为这些实例定义一种匹配方法。已经尝试了一些似乎在Internet上四处传播的解决方案,但我要么错过了一小部分,要么实现不正确。

我要避免的选项:

  • 绑定到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>

我尝试过的一些事情:

  • 跟踪
  • 绑定到[selected] =,selected = {{}}和[attr.selected](这似乎很接近)

我已经成功实现了呈现如下所示的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] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

在Angular2中设置ngmodel后,如何确保触发选择更改事件?

来自分类Dev

材质选择框未显示ngModel的绑定值-Angular2

来自分类Dev

将ngModel中的对象传递给自定义控件Angular2

来自分类Dev

Angular2中的条件ngModel

来自分类Javascript

Angular2 ngModel针对ngFor变量

来自分类Dev

来自@Input的angular2 ngModel

来自分类Dev

Angular2从ngFor绑定ngModel

来自分类Dev

通过Angular 2中的ngModel选择列表获取对象属性?

来自分类Dev

选择列表设置选择的项目angular 2 ngModel

来自分类Dev

Angular2 ngModel更改对输入type =“ number”的绑定

来自分类Dev

组件中的Angular2 ngModel验证器

来自分类Dev

angular2将ngModel传递给子组件

来自分类Dev

带有ngFor元素的ngModel的动态angular2形式

来自分类Dev

在Angular2中使用ngModel测试双向绑定

来自分类Dev

angular2 + ngModel无法绑定表达式?

来自分类Dev

扩展Angular 2 ngModel指令以使用可观察对象

来自分类Dev

Angular2选择对象的选项

来自分类Dev

Angular2使用ngValue选择初始对象

来自分类Dev

Angular-变量中的ngModel对象属性

来自分类Dev

使用Angular2更改选择选项

来自分类Dev

Angular2选择ngValue null

来自分类Dev

选择框的Angular 2 ngModel更改不更新所选选项

来自分类Dev

angularjs ngModel未在选择输入中选择选项

来自分类Dev

函数内部的Angular 2 ngModel

来自分类Dev

Angular ngModel与指令

来自分类Dev

文档setAttribute ngModel Angular

来自分类Dev

服务对象无法绑定到Angular 5中的ngModel

来自分类Dev

如何在Angular2中使用* ngFor动态生成ngModel?

来自分类Dev

Angular2 keyup事件更新ngModel光标位置跳到结尾

TOP 榜单

热门标签

归档