如何以角度7動態形式填充從屬下拉列表？

Question

我有一個動態表單，該表單具有多個下拉列表，並且其中一個依賴於另一個下拉列表。 問題是我無法填充從屬下拉列表。

jobDepartmentDropdownOnChange(e: any) {
    this.personnelRecruitmentInfoService.getAllByJobDepartmentId(e.value).subscribe(
      res => {
        if (res.code === ResponseCode.success) {
          res.dataList.map(item => {
            this.personnels.push({
              value: item.personnel.id.toString(),
              label: item.personnel.dataValue
            });
          });

          if (this.formComponent !== undefined) {
            this.formComponent.form.controls['personnelId'].patchValue(this.personnels);
          }
        }
      }
    );
  }

const personnelDropdown = new InputDropdown({
  key: 'personnelId',
  label: '',
  options: this.personnels,
  value: '',
  disabled: true,
  required: false,
  multiple: true,
  order: 20
});

public personnels: any[] = [];

const jobDepartmentDropdown = new InputDropdown({
  key: 'jobDepartmentId',
  label: '',
  options: this.jobDepartments,
  value: '',
  onChange: this.jobDepartmentDropdownOnChange.bind(this),
  disabled: true,
  required: false,
  multiple: true,
  order: 19
});

export class InputDropdown extends InputBase<string> {
  controlType = 'dropdown';
  options: { value: string, label: string }[] = [];
  showSelect = false;
  multiple = false;

  constructor(options: {} = {}) {
    super(options);
    this.options = options['options'] || [];
    this.showSelect = options['showSelect'] || false;
    this.multiple = options['multiple'] || false;
  }
}

如何根據上一個下拉列表填充personnelId ID下拉列表？

Answer 1

相對於觸發角度變化檢測周期的方式（通常是性能明智的方法），最好是為您的人員使用一個主題。 但是，如果您只是想知道為什么解決方案無論性能如何都不起作用，那么您在推動人員對象中的元素實際上並未更改this.personnels持有的引用。 這意味着不會觸發角度變化檢測。 如果您確實要觸發更改檢測，請按以下方式更改“推送”：

jobDepartmentDropdownOnChange(e: any) {
    this.personnelRecruitmentInfoService.getAllByJobDepartmentId(e.value).subscribe(
      res => {
        if (res.code === ResponseCode.success) {
          res.dataList.map(item => {
            // Use the spread operator to create a new array hence 
            // updating the reference in the object angular detects changes upon.
            this.personnels = [...this.personnels, {
              value: item.personnel.id.toString(),
              label: item.personnel.dataValue
            }];
          });

          if (this.formComponent !== undefined) {
            this.formComponent.form.controls['personnelId'].patchValue(this.personnels);
          }
        }
      }
    );
  }

Answer 2

我找到了解決方案：

const jobDepartmentDropdown = new InputDropdown({
  key: 'jobDepartmentId',
  label: '',
  options: this.jobDepartments,
  value: '',
  onChange: this.jobDepartmentDropdownOnChange.bind(this),
  disabled: true,
  required: false,
  multiple: true,
  order: 19
});

((this.inputs as InputBase<any>[]).find(i => i.key === 'personnelId') as InputDropdown).options = options;