角度选择选项

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>