Angular 2 种形式：绑定 html select 到对象集合

Question

我想在 angular 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 但结果相同。

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

感谢您的帮助。我已经在 Internet 搜索和反复试验上浪费了几个小时。也许有人遇到过同样的问题。

编辑 (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 将从列表中选择正确的项目，包括它的所有属性。

Angular 2 种形式：绑定 html select 到对象集合

Angular 2 Forms: binding html select to collection of objects

html

forms

angular2-ngmodel

angular