ドロップダウンリストで選択した項目に基づいてJSON APIデータをフィルタリングします

Question

今日、Ionic 2アプリで作業しています。ここで

は私のコードです：

TSファイル：

 <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> 

は私がやりたいこと

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."); 
}); 

テンプレートであることを私は中都道府県を選択したときprovince-dropdownメニューでは、州の下の都市のみがcitに表示されますyドロップダウンメニュー。

私はまだどのように私は私のコードでのフィルタリングのこの種を実装します見当がつかない。あなたたちが私を助けてくれることを願っています。前もって感謝します。

Answer 1

provinceName性質を持っている、あなたは、イオン選択の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."); 
     }); 
} 

を