Lütfen bana yardım edebilir misiniz? Kolay olması gerekiyordu, ama çözümü bulamıyorum. İki seçim içeren bir form var. # Select1 değiştiğinde # select2, # select1 değerine göre verileri göstermelidir. Örneğin, her devletin şehirlerini alın.'Olayları seçer Angular2
Bu elbette işe yaramıyor. LÜTFEN, nasıl yapıldığını biliyor musun? Alfa28'de.
Harika! Nasıl çalışacağını öğrendim! :) Eksik olan tek şey, form modelinin etkinliğe geçmesiydi. Bu böyle olmalı: Bu benim bir modele dayalı bir yaklaşım ve Gözlenebilirler ile, 2 Açısal RC5 yapacağını nasıl
<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>
Eğik 2 son template syntax ile cevaplama ve typescript bileşeni
//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];
}
}
. Bu, daha sonra her tuş vuruşunda arka ucunuza çarpmamak ya da girişi daha fazla işlemek için debounceTime()'u kullanabileceğiniz bir arama alanı olabilir.
//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
}
}