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

Question

我想在 Angular 2 应用程序（RC 5，forms 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

根据您的代码和解释，我假设“项目”是一个复杂的对象，而不是一个简单的对象。所以要在 HTML 中显示它，你可以使用：

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

在代码中，您必须访问“项目”属性（如 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 将从列表中选择正确的项目，包括它的所有属性。