我有州
和城市
的选择选项,我希望当我选择州时,与该州相关的城市显示在第二个选择字段中。
屏幕截图
状态列表
城市列表
代码
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)
);
}
}
知道如何根据所选州获取我的城市列表吗?
最佳答案
当有人选择状态时,您可以监听“ionChange”事件。例如
<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>
并且在监听器中您可以调用您的服务
onChange(value) {
// call your service to fetch cities
console.log(value);
this.cities = /* your success response*/
}
编辑: 然后您可以在 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>
关于javascript - Angular 选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57651719/