Angular 2形式:将html select绑定到对象集合

大卫·布雷姆

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

本·理查兹(Ben Richards)

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

将选择元素绑定到Angular中的对象

Angular ui-select:如何仅将所选值绑定到ng-model

递归Angular 2 HTML绑定

Angular 2+和Observables:由于它不是'select'的已知属性,因此无法绑定到'ngModel'

angular2 NgFor仅支持绑定到可迭代对象,例如数组

angular2将模型值绑定到单选按钮

使用Angular2将动态对象绑定到HTML

WPF将集合的集合绑定到DataGrid

Angular2-从输入文件读取二进制文件并将其绑定到对象

将文本输入绑定到可观察对象中的属性-Angular 2+

如何从valueChanges中获取所选对象,但仅使用Angular反应形式将对象ID绑定到表单?

Angular动态形式如何绑定到变量;

如何将Angular-Material Select字段的显示值绑定到ngModel

将选择标签数据绑定到Angular中的反应形式

Blazor:如何将Nullable对象绑定到<select>?

Angular 8:将元素绑定到对象数组

将集合绑定到DataGridView

将范围值绑定到angular的ui-select中的ui-select-match属性

Angular中的Ng-repeat绑定到对象{{key.value}}中的HTML模板

将对象绑定到Select2选项?

Angular2 / Typescript对象和属性绑定到模板

如何将多个对象绑定到集合?

Angular将对象元素绑定到HTML

如何使用选择将对象属性绑定到Angular2表单项

Angular 2 /打字稿将文本绑定到<meta property =“ og”>从组件到index.html

angular2将事件绑定到可观察对象

如何将动态创建的表单字段绑定到Angular 2中的对象?

Angular2:将<select>组合框绑定到从ngOnInit()中的API检索到的对象列表时,运行时错误

简单形式:将集合选择选项绑定到值

TOP 榜单

热门标签

归档