Angular12 依赖选择下拉框切换车辆品牌时已选车型未清空问题求解

核心修改逻辑 #

只需要调整loadVehicleMakeData方法，在请求对应品牌的车型数据前，先清空车型下拉的已选值和旧列表数据，同时修正ngOnInit的执行顺序避免表单未初始化报错即可。

1. 修正ngOnInit执行顺序 #

原来的执行顺序中表单初始化晚于数据加载，会导致操作表单控件时报错，调整为：

ngOnInit(): void {
  this.createVehicle(); // 先初始化表单
  this.loadAllParameters();
  this.loadVehicleMakeData(undefined);
  this.loadVehicleModelData(undefined);
}

2. 修改loadVehicleMakeData方法 #

在方法开头添加清空逻辑：

loadVehicleMakeData(event: any) {
  // 清空车型已选值
  this.createForm.get('vehicle_model_id')?.setValue(null);
  // 清空旧的车型列表数据
  this.vehiclemodels = [];
  // 原有逻辑
  if (event) {
    this.make_id = event.id;
  } else {
    this.make_id = '';
  }
  this.vehicleModelService.getVehicleModelsByMake(this.make_id).subscribe(
    (data) => {
      this.vehiclemodels = data.results.vehiclemodels;
    }
  );
}

效果说明 #

修改完成后，每次切换车辆品牌时：

• 车型下拉框已选的值会自动清空，回到未选择的占位符状态
• 旧的车型列表会先清空，避免新数据返回前还能选到旧品牌的车型
• 接口返回新品牌的车型数据后，自动填充到车型下拉框的选项中

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