Angular 12 ng-select级联下拉框onChange时如何清空关联下拉选项

要实现上级变更时自动清空下级数据，只需要在对应变更事件的回调中，先清空下级的选项数组和表单控件值，再加载新数据即可，具体修改如下：

修改组件TS代码 #

重点调整loadCountryData和loadStateData两个回调方法，同时修正ngOnInit中的无效调用：

countries!: any[];
cstates!: any[] = []; // 初始化空数组，避免初始访问length属性时报错
cities!: any[] = []; // 初始化空数组

// 此处表单组变量名请替换为你代码中实际定义的响应式表单变量名
userForm!: FormGroup;

ngOnInit(): void {
  this.loadAllParameters();
  // 删除原有的3个无效调用，初始化无选中值时无需触发加载逻辑
}

loadAllParameters() {
  this.dataService.getDataParameters().subscribe(
    data => {
      this.countries = data.results.countries;
    }
  );
}

loadCountryData(event: any) {
  // 国籍变更，先清空所有下级数据
  this.cstates = []; // 清空州/省选项数组
  this.cities = []; // 清空城镇选项数组
  this.userForm.get('state_id')?.reset(); // 重置州/省表单控件选中值
  this.userForm.get('city_id')?.reset(); // 重置城镇表单控件选中值

  if (event) {
    this.country_id = event.id;
    this.cstatesService.getStatesByCountry(this.country_id).subscribe(
      (data) => {
        this.cstates = data.results.states;
      }
    );
  } else {
    this.country_id = '';
  }
}

loadStateData(event: any) {
  // 州/省变更，先清空城镇数据
  this.cities = []; // 清空城镇选项数组
  this.userForm.get('city_id')?.reset(); // 重置城镇表单控件选中值

  if (event) {
    this.state_id = event.id;
    this.citiesService.fetchCitiesByState(this.state_id).subscribe(
      (data) => {
        this.cities = data.results.cities;
      }
    );
  } else {
    this.state_id = '';
  }
}

loadCityData(event: any) {
  if (event) {
    this.city_id = event.id;
  } else {
    this.city_id = '';
  }
}

视图HTML代码无需额外修改 #

原代码中*ngIf="cstates.length > 0"和*ngIf="cities.length > 0"的逻辑会在数组清空时自动隐藏对应的下拉框，新数据加载完成后自动显示，符合常规交互逻辑。

内容的提问来源于stack exchange，提问作者mikefolu