Javascript 选择'；安圭拉事件2

拜托，你能帮我吗？这应该很容易，但我找不到解决办法。有一个表格有两个选项。当#select1发生变化时#select2需要根据#select1的值显示数据。例如，获取每个州的城市。种类：

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

//html
{{state}}
{{城市}
//组件
@组件（{选择器：'用户管理'，appInjector:[FormBuilder]}）；
@视图（{templateUrl:'user management.html'，指令：[NgFor]}）；
导出类用户管理{
构造函数（fb:FormBuilder）{
this.userForm=fb.group({
用户状态：[]，
用户城市：[]
});
this.states=[‘纽约’、‘宾夕法尼亚’]；
this.cities={'newyork'：['Albany'，'Buffalo']，'Pennsylvania'：['Pittsburgh'，'Philadelphia']}；
}
getCities（$活动）{
返回此.cities[$event.target.value]；
}
}

---

当然，这是行不通的。拜托，你知道该怎么做吗？这是字母28。

太好了！我发现了如何让它工作！：）唯一缺少的是传递给事件的表单模型。应该是这样的:

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

{{state}}

使用Angular 2最新版本和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];
    }
}

//组件类型脚本
从'angular2/core'导入{Component}；
从'angular2/common'导入{NgForm}；
@组件（{选择器：'州城市'，
模板：`
{{state}}
{{城市}
`
})
导出类状态组件{
州=['纽约'，'宾夕法尼亚']；
城市=[]；
citiesData={'NewYork'：['Albany'，'Buffalo']，'Pennsylvania'：['Pittsburgh'，'Philadelphia']}；
getCities（州）{
this.cities=this.citiesData[state.value]；
}
}

这就是我将如何在Angular 2 RC5上使用模型驱动的方法和可观测数据进行操作。这也可能是一个搜索字段，您可以在其中使用

debounceTime（）

来避免每次击键都击中后端或进一步操纵输入

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

//组件类型脚本
从'@angular/core'导入{Component}；
从'@angular/forms'导入{FormControl，FormGroup，FormBuilder}；
@组件（{
moduleId:module.id，
选择器：“州和城市”，
模板：`
{{state}}
{{城市}
`
})
导出类状态组件{
国家：阵列；
城市：阵列；
citiesData：任何；
myForm:FormGroup；
构造函数（专用formBuilder:formBuilder）{
this.states=[‘纽约’、‘宾夕法尼亚’]；
这是1.cities=[]；
this.citiesData={'newyork'：['Albany'，'Buffalo']，'Pennsylvania'：['Pittsburgh'，'Philadelphia']}；
//设置表单
this.myForm=this.formBuilder.group({
国家：['']，
用户城市：['']
});
//现在，使用可观察到的
此.myForm.controls[“state”].valueChanges
.debounceTime（100）//用户输入后稍等片刻（毫秒）
.订阅（状态=>{
this.cities=this.citiesData[州]；
});
}
onSubmit（）{
//做点什么
}
}

你可以阅读