Sự kiện được chọn trong Angular2

Question

Xin vui lòng, bạn có thể giúp tôi không? Nó được cho là dễ dàng, nhưng tôi không thể tìm ra giải pháp. Có một hình thức với hai lựa chọn. Khi # select1 thay đổi, # select2 cần hiển thị dữ liệu theo giá trị của # select1. Ví dụ: nhận thành phố của mỗi tiểu bang. Loại:

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

này, tất nhiên, không hoạt động. XIN, bạn có biết làm thế nào nó nên được thực hiện? Đó là trong alpha28.

Answer 1

Tuyệt vời! Tôi đã tìm ra cách để nó hoạt động! :) Điều duy nhất bị thiếu, là mẫu biểu mẫu được truyền cho sự kiện. Nó phải là như thế này:

<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

Trả lời với góc 2 mới nhất template syntax và nguyên cảo thành phần

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

Đây là cách tôi sẽ làm điều đó trên góc 2 RC5, với một cách tiếp cận mô hình điều khiển và quan sát. Đây cũng có thể là trường tìm kiếm nơi bạn sau đó sử dụng debounceTime() để không nhấn chương trình phụ trợ của bạn trên mọi phím tắt hoặc thao tác thêm đầu vào.

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

Bạn có thể đọc more about change detection here.