Angular 2 Forms：绑定html选择对象集合

发布时间：2020-12-17 17:04:41 所属栏目：安全来源：网络整理

导读：我想在角度2应用程序中显示可选对象的集合(RC 5,形式0.3.0) select [(ngModel)]="selectedItem" option *ngFor="let item of selectableItems" [value]="item" {{ item }} /option/selectdiv {{ selectedItem }} /div 列表本身已正确显示. 但是’selectedIte

我想在角度2应用程序中显示可选对象的集合(RC 5,形式0.3.0)

<select [(ngModel)]="selectedItem">       
  <option *ngFor="let item of selectableItems"
          [value]="item">
    {{ item }}
  </option>
</select>

<div> {{ selectedItem }} </div>

列表本身已正确显示.

但是’selectedItem’显示的所有内容都是[object Object].在代码中访问项目时,我得到相应的字符串“[object Object]”.我尝试切换到ngValue但产生相同的结果.

当我使用原始值而不是对象时,整个过程都有效.但我怀疑我在这里错过了一些关键点.

谢谢你的帮助.我一直在互联网搜索和反复试验上浪费了几个小时.也许有人遇到过同样的问题.

编辑(24-08-16)：我遇到了这个教程,它解释了如何创建常用窗体小部件.也许对于登陆此页面的人来说这是有用的：https://scotch.io/tutorials/how-to-deal-with-different-form-controls-in-angular-2

解决方法

从你的代码和解释,我认为“item”是一个复杂的对象,而不是一个简单的对象.因此,要在HTML中显示它,您将使用：

<div> {{ selectedItem | json }} </div>

在代码中,您必须访问“item”属性(如item.value或项目的属性.如果您想使用简单的值,您可以执行以下操作：

<select [(ngModel)]="selectedItem">       
  <option *ngFor="let item of selectableItems"
          [value]="item.id">
    {{ item }}
  </option>
</select>

这当然是假设item是一个复杂的类型.

编辑

经过一番挖掘(因为这也困扰了我),我找到了我真正想要的解决方案！要使用复杂对象,您只需在绑定值时使用[ngValue]！修复程序在https://github.com/angular/angular/issues/4843中描述.所以上面的内容将如下所示：

<select [(ngModel)]="selectedItem">       
     <option *ngFor="let item of selectableItems"
             [ngValue]="item">
             {{item}}
     </option>
</select>

然后selectedItem将从列表中找到正确的项目,包括它的所有属性.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!