将选择元素绑定到 Angular 中的对象 [英] Binding select element to object in Angular

问题描述

我想将一个选择元素绑定到一个对象列表——这很容易:

@Component({选择器:'myApp'，模板:`<h1>我的应用程序</h1><select [(ngModel)]=selectedValue"><option *ngFor=#c of countries"value=c.id">{{c.name}}</选择>`})导出类 AppComponent{国家 = [{id:1，名称:美国"}，{id:2，名称:澳大利亚"}{id:3，名称:加拿大"}，{id:4，名称:巴西"}，{id:5，名称:英格兰"}];selectedValue = null;}

在这种情况下，selectedValue 似乎是一个数字——所选项目的 id.

然而，我实际上想绑定到 country 对象本身，以便 selectedValue 是对象而不仅仅是 id.我尝试像这样更改选项的值:

{{c.name}}

但这似乎不起作用.它似乎在我的 selectedValue 中放置了一个对象——但不是我期望的对象.您可以在我的 Plunker 示例中看到这一点.

我还尝试绑定到更改事件，以便我可以根据选定的 id 自己设置对象；但是，似乎在更新绑定的 ngModel 之前触发了更改事件 - 这意味着我当时无法访问新选择的值.

是否有一种干净的方法可以使用 Angular 2 将选择元素绑定到对象?

解决方案

我的应用程序
<select [(ngModel)]="selectedValue"><option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option></选择>

StackBlitz 示例

注意:您可以使用 [ngValue]="c" 而不是 [ngValue]="c.id" 其中 c 是完整的国家对象.>

[value]="..." 仅支持字符串值
[ngValue]="..." 支持任何类型

更新

如果 value 是一个对象，则预选实例需要与其中一个值相同.

另见最近添加的自定义比较https://github.com/angular/angular/issues/13268自 4.0.0-beta.7 起可用

<select [compareWith]="compareFn" ...

如果你想在compareFn中访问this，请注意.

compareFn = this._compareFn.bind(this);//或者//compareFn = (a, b) =>this._compareFn(a, b);_compareFn(a, b) {//处理比较逻辑(例如检查唯一 ID 是否相同)返回 a.id === b.id;}

I'd like to bind a select element to a list of objects -- which is easy enough:

@Component({
   selector: 'myApp',
   template: 
      `<h1>My Application</h1>
       <select [(ngModel)]="selectedValue">
          <option *ngFor="#c of countries" value="c.id">{{c.name}}</option>
       </select>`
    })
export class AppComponent{
   countries = [
      {id: 1, name: "United States"},
      {id: 2, name: "Australia"}
      {id: 3, name: "Canada"},
      {id: 4, name: "Brazil"},
      {id: 5, name: "England"}
   ];
   selectedValue = null;
}

In this case, it appears that selectedValue would be a number -- the id of the selected item.

However, I'd actually like to bind to the country object itself so that selectedValue is the object rather than just the id. I tried changing the value of the option like so:

<option *ngFor="#c of countries" value="c">{{c.name}}</option>

but this does not seem to work. It seems to place an object in my selectedValue -- but not the object that I'm expecting. You can see this in my Plunker example.

I also tried binding to the change event so that I could set the object myself based on the selected id; however, it appears that the change event fires before the bound ngModel is updated -- meaning I don't have access to the newly selected value at that point.

Is there a clean way to bind a select element to an object with Angular 2?

解决方案

<h1>My Application</h1>
<select [(ngModel)]="selectedValue">
  <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option>
</select>

StackBlitz example

NOTE: you can use [ngValue]="c" instead of [ngValue]="c.id" where c is the complete country object.

[value]="..." only supports string values
[ngValue]="..." supports any type

update

If the value is an object, the preselected instance needs to be identical with one of the values.

See also the recently added custom comparison https://github.com/angular/angular/issues/13268 available since 4.0.0-beta.7

<select [compareWith]="compareFn" ...

Take care of if you want to access this within compareFn.

compareFn = this._compareFn.bind(this);

// or 
// compareFn = (a, b) => this._compareFn(a, b);

_compareFn(a, b) {
   // Handle compare logic (eg check if unique ids are the same)
   return a.id === b.id;
}

这篇关于将选择元素绑定到 Angular 中的对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！