Binding select element to object in Angular

Question

Sono nuovo di Angular e sto cercando di mettermi al passo con il nuovo modo di fare le cose.

vorrei associare un elemento di selezione di un elenco di oggetti - che è abbastanza facile:

@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 questo caso, sembra che SelectedValue sarebbe un numero - l'id del oggetto selezionato.

Tuttavia, mi piacerebbe davvero legarsi all'oggetto Paese in modo che selectValue sia l'oggetto anziché solo l'id. Ho provato a cambiare il valore dell'opzione in questo modo:

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

ma questo non sembra funzionare. Sembra posizionare un oggetto nel mio SelectedValue - ma non l'oggetto che mi aspetto. È possibile see this in my Plunker example.

Ho anche provato ad associare l'evento change in modo da poter impostare l'oggetto da solo in base all'ID selezionato; tuttavia, sembra che l'evento change si attivi prima che il ngModel associato venga aggiornato, ovvero non ho accesso al valore appena selezionato in quel punto.

C'è un modo pulito per associare un elemento selezionato a un oggetto con Angular 2?

Answer 1

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

Plunker example

NOTA: È possibile utilizzare [ngValue]="c" invece di [ngValue]="c.id" dove c è l'oggetto di campagna completa.

[value]="..." supporta solo valori stringa
[ngValue]="..." supporta qualsiasi tipo

aggiornamento

Se il value è un oggetto, l'istanza prescelta deve essere identica con uno dei valori.

Vedere anche il confronto personalizzato recentemente aggiunto https://github.com/angular/angular/issues/13268 disponibili dal 4.0.0-beta.7

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

Prenditi cura di se si desidera accedere this all'interno compareFn.

compareFn = this._compareFn.bind(this); 

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

_comareFn((a, b) { 
    if(this.x ...) { 
    ... 
}