根据下拉列表中选择的项目过滤 JSON API 数据答案

【问题标题】：Filter JSON API data based on the item selected in the dropdown根据下拉列表中选择的项目过滤 JSON API 数据
【发布时间】：2018-02-24 08:43:21
【问题描述】：

您好，我目前正在开发 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>

我想做的是，当我在省下拉菜单中选择一个省时，只有该省下的城市会显示在城市下拉菜单中。

我仍然不知道如何在我的代码中实现这种过滤。希望你们能帮助我。提前谢谢你。

【问题讨论】：

标签： javascript json angular typescript ionic2

【解决方案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.");
        });
}

【讨论】：