Wählt Ereignisse in Angular2 aus

Question

Bitte, können Sie mir helfen? Es soll einfach sein, aber ich kann keine Lösung finden. Es gibt ein Formular mit zwei Auswahlmöglichkeiten. Wenn sich # select1 ändert, muss # select2 Daten entsprechend dem Wert von # select1 anzeigen. Zum Beispiel, erhalten Sie Städte von jedem Staat. Art:

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

Dies funktioniert natürlich nicht. Bitte, weißt du, wie es gemacht werden sollte? Es ist in alpha28.

Answer 1

Großartig! Ich habe herausgefunden, wie es funktioniert! :) Das einzige, was fehlte, war das Formularmodell, das an das Ereignis übergeben wurde. Es sollte so aussehen:

<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

Answering mit kantigen 2 neuesten template syntax und Typoskript Komponente

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

Dies ist, wie ich es auf Angular 2 RC5 mit einem modellgetriebenen Ansatz und Observable tun würde. Dies könnte auch ein Suchfeld sein, in dem Sie dann debounceTime() verwenden, um nicht bei jedem Tastendruck auf Ihr Backend zu stoßen oder die Eingabe weiter zu manipulieren.

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

Sie können more about change detection here lesen.