3

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

4

1 回答 1

11

根据您的代码和解释，我假设“项目”是一个复杂的对象，而不是一个简单的对象。因此，要在 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 将从列表中选择正确的项目，包括它的所有属性。

于 2016-08-22T15:54:21.390 回答