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

Question

我想在角度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

Answer 1

从你的代码和解释,我认为"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将从列表中找到正确的项目,包括它的所有属性.