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

I'm new to Angular and trying to get up to speed with the new way of doing things.

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

@Component({

selector: 'myApp',

template: `

My Application

{{c.name}}

`

})

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:

{{c.name}}

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?

解决方案

My Application

{{c.name}}

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

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

compareFn = this._compareFn.bind(this);

// or

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

_comareFn((a, b) {

if(this.x ...) {

...

}