Angular2中的选择事件

Posted 2023-02-22

【中文标题】Angular2中的选择事件

【英文标题】：Selects' events in Angular2

【发布时间】：2015-09-19 14:15:26

【问题描述】：

拜托，你能帮帮我吗？这应该很容易，但我找不到解决方案。有一个带有两个选择的表单。当#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];
    

这当然行不通。请问，你知道应该怎么做吗？它在 alpha28 中。

【参考方案1】：

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

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

【参考方案2】：

用 Angular 2 最新的template syntax 和 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];
    

【参考方案3】：

这就是我在 Angular 2 RC5 上使用模型驱动方法和 Observables 的方式。这也可以是一个搜索字段，然后您可以在其中使用 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
  

您可以阅读more about change detection here。