Seleziona gli eventi in Angular2

Question

Per favore, puoi aiutarmi? Dovrebbe essere facile, ma non riesco a trovare la soluzione. C'è una forma con due selezioni. Quando # seleziona1 cambia, # select2 deve mostrare i dati in base al valore di # select1. Ad esempio, ottieni città di ogni stato. Tipo di:

//html 

<select (change)="select2.getCities($event)" ng-control="userState"> 
    <option *ng-for="#state of states" [value]="state">{{state}}</option> 
</select> 

<select #select2 ng-control="userCity"> 
    <option *ng-for="#city of cities" [value]="city">{{city}}</option> 
</select> 

//the Component 
@Component({ selector: 'user-management', appInjector: [FormBuilder] }); 
@View({ templateUrl: 'user-management.html', directives: [NgFor] }); 
export class userManagement { 
    constructor(fb: FormBuilder){ 
     this.userForm = fb.group({ 
      userState: [], 
      userCity: [] 
     }); 
     this.states = ['New York', 'Pennsylvania']; 
     this.cities = {'New York': ['Albany', 'Buffalo'], 'Pennsylvania':['Pittsburgh', 'Philadelphia']}; 
    } 
    getCities($event){ 
     return this.cities[$event.target.value]; 
    } 
} 

Questo, ovviamente, non funziona. PER FAVORE, sai come dovrebbe essere fatto? È in alpha28.

Answer 1

Ottimo! Ho scoperto come farlo funzionare! :) L'unica cosa che mancava era il modello di modulo passato all'evento. Dovrebbe essere simile a questo:

<form [ng-form-model]="userForm"> 
<select (change)="select2.getCities($event, userForm)" ng-control="userState"> 
    <option *ng-for="#state of states" [value]="state">{{state}}</option> 
</select> 

Answer 2

Rispondere con angolare 2 ultima template syntax e componente tipografico

//The Component Type script 
import {Component} from 'angular2/core'; 
import {NgForm} from 'angular2/common'; 

@Component({ selector: 'states-cities', 
      template: ` 
        <form (ngSubmit)="onSubmit()" #heroForm="ngForm"> 
         <select ngControl="state" #state="ngForm" (change)="getCities(state)"> 
          <option *ngFor="#state of states" [value]="state" >{{state}}</option> 
         </select> 

         <select ngControl="userCity" #select2="ngForm"> 
          <option *ngFor="#city of cities" [value]="city">{{city}}</option> 
         </select> 
         </form> 
        ` 


      }) 
export class stateCitiesComponent { 

    states= ['New York', 'Pennsylvania']; 
    cities = []; 
    citiesData={'New York': ['Albany', 'Buffalo'], 'Pennsylvania':['Pittsburgh', 'Philadelphia']}; 

    getCities(state){ 
     this.cities=this.citiesData[state.value]; 
    } 
} 

Answer 3

Ecco come lo farei su angolare 2 RC5, con un approccio model-driven e osservabili. Questo potrebbe anche essere un campo di ricerca in cui quindi utilizzare debounceTime() per non colpire il back-end su ogni sequenza di tasti o manipolare ulteriormente l'input.

//The Component Type script 
import { Component } from '@angular/core'; 
import { FormControl, FormGroup, FormBuilder } from '@angular/forms'; 

@Component({ 
    moduleId: module.id, 
    selector: 'states-cities', 
    template: ` 
    <form [formGroup]="myForm" (ngSubmit)="onSubmit()"> 
     <select formControlName="state"> 
      <option *ngFor="let state of states" [value]="state" >{{state}}</option> 
     </select> 

     <select formControlName="userCity"> 
      <option *ngFor="let city of cities" [value]="city">{{city}}</option> 
     </select> 
     </form> 
    ` 
}) 
export class stateCitiesComponent { 

    states:Array<string>; 
    cities:Array<string>; 
    citiesData:any; 
    myForm:FormGroup; 

    constructor(private formBuilder: FormBuilder) { 
    this.states = ['New York', 'Pennsylvania']; 
    this.cities = []; 
    this.citiesData = {'New York': ['Albany', 'Buffalo'], 'Pennsylvania':['Pittsburgh', 'Philadelphia']}; 
    // Setup Form 
    this.myForm = this.formBuilder.group({ 
     state: [''], 
     userCity: [''] 
    }); 

    // Now setup change detection with an Observable 
    this.myForm.controls["state"].valueChanges 
    .debounceTime(100) // wait a litle after the user input (ms) 
    .subscribe(state => { 
     this.cities = this.citiesData[state]; 
    }); 

    } 


    onSubmit() { 
    // do something 
    } 
} 

È possibile leggere more about change detection here.