根據下拉列表中選擇的項目過濾JSON API數據

Question

美好的一天，我目前正在使用Ionic 2應用程序，並且在過濾下拉菜單中所選項目上的數據庫時遇到困難。

這是我的代碼：

TS文件：

    this.http.get('http://sample.com/xxx/api.php/address_province?transform=1')
.map(res => res.json())
.subscribe(data => {
    this.province = data.address_province;
    console.log(this.province);
}, (err) => {
    console.log("Something went wrong.");
});


this.http.get('http://sample.com/xxx/api.php/address_city?transform=1')
.map(res => res.json())
.subscribe(data => {
    this.city = data.address_city;
    console.log(this.city);
}, (err) => {
    console.log("Something went wrong.");
});

模板

        <ion-item>
          <ion-label>Province</ion-label>
          <ion-select [(ngModel)]="registerprovince" >
            <ion-option *ngFor="let prov of province" value="{{prov.province_description}}">{{prov.province_description}}</ion-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>City</ion-label>
          <ion-select [(ngModel)]="registercity" >
            <ion-option *ngFor="let cities of city" value="{{cities.city_description}}">{{cities.city_description}}</ion-option>
          </ion-select>
        </ion-item>

我想做的是，當我在“省”下拉菜單中選擇一個省時，“省”下拉菜單中僅顯示該省以下的城市。

我仍然不知道如何在代碼中實現這種過濾。 希望你們能幫助我。 先感謝您。

Answer 1

假設城市對象具有provinceName屬性，您可以攔截ion-select的ionChange事件，並在省份發生變化時進行城市過濾：

<ion-item>
    <ion-label>Province</ion-label>
    <ion-select [(ngModel)]="registerprovince" (ionChange)="onProvinceChange($event)>
        <ion-option *ngFor="let prov of province" value="{{prov.province_description}}">{{prov.province_description}}</ion-option>
    </ion-select>
</ion-item>

<ion-item>
    <ion-label>City</ion-label>
    <ion-select [(ngModel)]="registercity">
        <ion-option *ngFor="let city of filteredCities" value="{{city.city_description}}">{{city.city_description}}</ion-option>
    </ion-select>
</ion-item>

// In your component's class:

filteredCities = [];

onProvinceChange(selectedProvince: any) {
    console.log('Selected', selectedProvince);
    this.filteredCities = this.cities.filter(city => city.provinceName === selectedProvince.province_description);
}

ngOnInit() {
    this.http.get('http://sample.com/xxx/api.php/address_city?transform=1')
        .map(res => res.json())
        .subscribe(data => {
            this.cities = data.address_city;
            this.filteredCities = data.address_city;
        }, (err) => {
            console.log("Something went wrong.");
        });
}