Me gustaría vincular un elemento de selección a una lista de objetos, lo cual es bastante fácil:
@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; } En este caso, parece que selectedValue sería un número: la identificación del elemento seleccionado.
Sin embargo, en realidad me gustaría enlazar con el objeto del país en sí mismo para que el selectedValue sea el objeto en lugar de solo la identificación. Intenté cambiar el valor de la opción así:
<option *ngFor="#c of countries" value="c">{{c.name}}</option> pero esto no parece funcionar. Parece colocar un objeto en mi selectedValue , pero no el objeto que espero. Puedes ver esto en mi ejemplo de Plunker .
También intenté vincularme al evento de cambio para poder configurar el objeto yo mismo en función de la identificación seleccionada; sin embargo, parece que el evento de cambio se activa antes de que se actualice el ngModel enlazado, lo que significa que no tengo acceso al valor recién seleccionado en ese momento.
¿Existe una forma limpia de vincular un elemento seleccionado a un objeto con Angular 2?
<h1>My Application</h1> <select [(ngModel)]="selectedValue"> <option *ngFor="let c of countries" [ngValue]="c">{{c.name}}</option> </select> NOTA: puede usar [ngValue]="c" en lugar de [ngValue]="c.id" donde c es el objeto de país completo.
[value]="..." solo admite valores de cadena
[ngValue]="..." admite cualquier tipo
actualizar
Si el value es un objeto, la instancia preseleccionada debe ser idéntica a uno de los valores.
Consulte también la comparación personalizada recientemente agregada https://github.com/angular/angular/issues/13268 disponible desde 4.0.0-beta.7
<select [compareWith]="compareFn" ... Tenga cuidado si desea acceder a this dentro de 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; }Esto podría ayudar:
<select [(ngModel)]="selectedValue"> <option *ngFor="#c of countries" [value]="c.id">{{c.name}}</option> </select>También puede hacer esto sin la necesidad de usar [(ngModel)] en su etiqueta <select>
Declare una variable en su archivo ts
toStr = JSON.stringify;
y en tu plantilla haz esto
<option *ngFor="let v of values;" [value]="toStr(v)"> {{v}} </option>y luego usar
let value=JSON.parse(event.target.value)para analizar la cadena de nuevo en un objeto JavaScript válido