javascript - 根据下拉列表中选择的项目过滤 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

假设 city 对象有 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.");
        });
}