屏幕截图

Question

我有states和cities的选择选项，我希望在选择州时，与该州相关的城市显示在第二个选择字段中。

屏幕截图

states list

cities list

代码

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

注意：显然在上面的代码中，我需要城市功能，这就是我需要您的帮助才能获得这些城市的清单。

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

有什么主意要根据所选州获得我的城市列表吗？

Answer 1

当有人选择状态时，您可以收听“ 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>

Answer 2

在您的组件中

export class AddTokoPage implements OnInit {

cities:any[]=[] // definecities

onStateSelect(stateid){
this.stateService.getCities(stateid).subscribe(data=>{
this.cities=data;
})
}

在html端，将ionChange添加到您的状态下拉列表中

<ion-item>
    <ion-label>Pilih Province</ion-label>
    <ion-select formControlName="province_id" multiple="false" placeholder="Pihil Province" #state (ionChange)="onStateChange(state.value)">
    <ion-select-option *ngFor="let state of states" value="state.province_id">{{state.province}}</ion-select-option>
    </ion-select>
</ion-item>

并为您的城市下拉列表添加代码

<ion-item *ngIf="cities?.length">
    <ion-label>Cities</ion-label>
    <ion-select  multiple="false" #cities>
    <ion-select-option *ngFor="let city of cities" value="city.yourcityfield">{{city.fieldToDisplay}}</ion-select-option>
    </ion-select>
</ion-item>

角度选择选项

屏幕截图

代码

2 个答案: