web-dev-qa-db-fra.com

Sélectionne les événements dans Angular2

Pourriez-vous m'aider s'il vous plait? C'est supposé être facile, mais je ne trouve pas la solution. Il existe un formulaire avec deux sélections. Lorsque # select1 change, # select2 doit afficher les données en fonction de la valeur de # select1. Par exemple, obtenez les villes de chaque état. Genre de :

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

Ceci, bien sûr, ne fonctionne pas. S'IL VOUS PLAÎT, savez-vous comment cela devrait être fait? C'est en alpha28.

javascripthtmldomangular
9
kakaja

Génial! J'ai découvert comment le faire fonctionner! :) La seule chose qui manquait était le modèle de formulaire transmis à l'événement. Cela devrait être comme ça:

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

Réponse avec Angular 2 dernière syntaxe de modèle et composant 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];
    }
}
5
Santhosh Gandhe

Voici comment je le ferais sur Angular 2 RC5, avec une approche basée sur un modèle et des observables. Il peut également s'agir d'un champ de recherche dans lequel vous utilisez ensuite debounceTime() pour ne pas frapper votre système sur chaque frappe, ni manipuler davantage l'entrée.

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

Vous pouvez lire plus d'informations sur la détection de changement ici .

3
Ole Spaarmann