Question

我想在角度2应用程序中显示可选对象的集合（RC 5，形成0.3.0）

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

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

列表本身已正确显示。

但所有显示为＆＃39; selectedItem＆＃39;是[object Object]。在代码中访问项目时，我得到相应的字符串＆＃34; [object Object]＆＃34;。我尝试切换到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将列出列表中的正确项目，包括其所有属性。

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

1 个答案: