Selecciona los events en Angular2

¿Por favor, me puedes ayudar? Se supone que es fácil, pero no puedo encontrar la solución. Hay un formulario con dos selects. Cuando # select1 cambia, # select2 necesita mostrar los datos de acuerdo con el valor de # select1. Por ejemplo, obtenga ciudades de cada estado. Mas o less :

//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]; } } 

Esto, por supuesto, no funciona. POR FAVOR, ¿sabes cómo se debe hacer? Está en alpha28.

¡Estupendo! ¡Descubrí cómo hacerlo funcionar! 🙂 Lo único que faltaba era el model de formulario pasado al evento. Debería ser así:

 <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> 

Respondiendo con la syntax de plantilla más reciente de Angular 2 y el componente de Typescript

  //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]; } } 

Así es como lo haría en Angular 2 RC5, con un enfoque basado en models y Observables. Esto también podría ser un campo de búsqueda donde luego use debounceTime() para no golpear su back-end con cada pulsación de tecla o manipular la input aún más.

 //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 } } 

Puede leer más sobre la detección de cambios aquí .