Binding ngModel ad un modello per un controllo di selezione

Question

In 1.x angolare, si potrebbe associare ngModel ad un modello per un controllo di selezione:

<select ng-model="selectedPerson" 
    ng-options="person as person.name for person in people"> 
</select> 

Quando viene selezionata un'opzione, il modello selectedPerson punterà alla person modello selezionato dall'utente.

C'è un modo per fare la stessa cosa in Angular2?

ho provato quanto segue senza fortuna:

<select [(ngModel)] = "selectedPerson"> 
    <option *ngFor="#person of people"> {{ person.name }}</option> 
</select> 

Ho anche provato:

<select [(ngModel)] = "selectedPerson"> 
    <option *ngFor="#person of people" [value]="person"> {{ person.name }}</option> 
</select> 

Nel primo tentativo, selectedPerson riferimenti modello person.name piuttosto che l'oggetto person. E nel secondo tentativo, fa riferimento a un oggetto, che non sembra essere un oggetto JSON.

Qualche idea su cosa sto facendo male? È possibile?

Answer 1

Si potrebbe implementare un <select> all'interno di un modulo utilizzando la direttiva FormBuilder:

import { FormBuilder, Validators } from '@angular/forms'; 

export class LoginPage { 

    constructor(form: FormBuilder) { 
    this.cities = ["Shimla", "New Delhi", "New York"]; // List of cities 
    this.loginForm = form.group({ 
     username: ["", Validators.required], 
     password: ["", Validators.required], 
     city: ["", Validators.required] // Setting the field to "required" 
    }); 
    } 

    login(ev) { 
    console.log(this.loginForm.value); // {username: <username>, password: <password>, city: <city>} 
    } 

} 

Nel vostro html:

<form [ngFormModel]="loginForm" (submit)="login($event)"> 

    <input type="text" ngControl="username"> 
    <input type="password" ngControl="password"> 
    <select ngControl="city"> 
     <option *ngFor="#c of cities" [value]="c">{{c}}</option> 
    </select> 
    <button block type="submit" [disabled]="!loginForm.valid">Submit</button> 

</form> 

Official Documentation

Answer 2

Ho lo stesso problema cercando di passare un oggetto come valore selezionato per un ngModel. Una soluzione alternativa che vedo è quella di utilizzare una versione stringa dell'oggetto che passa a una stringa, ma è molto sporca.

Alla fine ho deciso di creare un indice separato nell'oggetto che viene passato a ngModel. Questo io uso per selezionare l'oggetto e fare l'azione.

anche questione sollevata in: https://github.com/angular/angular/issues/4843 e How to use select/option/NgFor on an array of objects in Angular2