[英]Angular select option
I have select option for states
and cities
, I want when I select state, cities related to that state shows in second select field. 我有states
和cities
选择选项,我想在选择州时,在第二个选择字段中显示与该州相关的城市。
states list
cities list
HTML
<ion-item>
<ion-label>Pilih Province</ion-label>
<ion-select formControlName="province_id" multiple="false" placeholder="Pihil Province">
<ion-select-option *ngFor="let state of states" value="state.province_id">{{state.province}}</ion-select-option>
</ion-select>
</ion-item>
<ion-item>
<ion-label>Pilih Kota</ion-label>
<ion-select formControlName="kota_id" multiple="falsee" placeholder="Pilih Kota">
<ion-select-option value="peperoni">Peperoni</ion-select-option>
<ion-select-option value="hawaii">Hawaii</ion-select-option>
</ion-select>
</ion-item>
toko.page.ts
export class AddTokoPage implements OnInit {
states: any[] = [];
constructor(
private statesService: StatesService, //service for returning states and cities
) { }
ngOnInit() {
this.allStates();
}
//get states list
allStates(){
this.statesService.getStates().subscribe((res) => {
for (let state of res) {
this.states.push(state);
}
});
}
}
Note: obviously in my code above I need cities function and that's where I need your help to get those cities lists. 注意:显然,在我上面的代码中,我需要城市功能,在那儿我需要您的帮助才能获得这些城市列表。
states.service.ts
export class StatesService {
token: any;
constructor(
private http: HttpClient,
private env: EnvService,
private storage: NativeStorage
) {
this.storage.getItem('token').then((token) => {
this.token = token;
}).catch(error => console.error(error));
}
getStates(): Observable<any> {
const httpOptions = {
headers: new HttpHeaders({
'Accept': 'application/json, text/plain',
'Content-Type': 'application/json'
})
};
return this.http.get(`${this.env.STATES_URL}`, httpOptions).pipe(
map(states => states.data)
);
}
getCities(id) {
const httpOptions = {
headers: new HttpHeaders({
'Accept': 'application/json, text/plain',
'Content-Type': 'application/json'
})
};
return this.http.get(`${this.env.CITIES_URL}/${id}`, httpOptions).pipe(
map(cities => cities)
);
}
}
Any idea hw to get my cities list based on selected state? 有什么想法可以根据所选州获得我的城市清单吗?
You can listen to 'ionChange' event when someone selects a state. 当有人选择状态时,您可以收听“ ionChange”事件。 For eg 例如
<ion-item>
<ion-label>Pilih Province</ion-label>
<ion-select formControlName="province_id" multiple="false" placeholder="Pihil Province" #state (ionChange)="onChange(state.value)">
<ion-select-option *ngFor="let state of states" value="state.province_id">{{state.province}}</ion-select-option>
</ion-select>
</ion-item>
and in the listener you can call your service 在监听器中,您可以致电服务
onChange(value) {
// call your service to fetch cities
console.log(value);
this.cities = /* your success response*/
}
EDIT: Then you can populate these cities on HTML 编辑:然后您可以在HTML上填充这些城市
<ion-item>
<ion-label>Cities</ion-label>
<ion-select formControlName="cities" multiple="false">
<ion-select-option *ngFor="let city of cities | async" value="city.city_id">{{city.name}}</ion-select-option>
</ion-select>
</ion-item>
In your component 在你的组件中
export class AddTokoPage implements OnInit {
cities:any[]=[] // definecities
onStateSelect(stateid){
this.stateService.getCities(stateid).subscribe(data=>{
this.cities=data;
})
}
on html side add ionChange
to your state dropdown 在html端,将ionChange
添加到您的状态下拉列表中
<ion-item>
<ion-label>Pilih Province</ion-label>
<ion-select formControlName="province_id" multiple="false" placeholder="Pihil Province" #state (ionChange)="onStateChange(state.value)">
<ion-select-option *ngFor="let state of states" value="state.province_id">{{state.province}}</ion-select-option>
</ion-select>
</ion-item>
And add code for your cities dropdown 并为您的城市下拉列表添加代码
<ion-item *ngIf="cities?.length">
<ion-label>Cities</ion-label>
<ion-select multiple="false" #cities>
<ion-select-option *ngFor="let city of cities" value="city.yourcityfield">{{city.fieldToDisplay}}</ion-select-option>
</ion-select>
</ion-item>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.