如何以角度7动态形式填充从属下拉列表？

Question

I have a dynamic form that has more than one dropdown and one of dropdown dependent another. The problem is that I couldn't populate the dependent dropdown.

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

How can I populate personnelId dropdown according to the previous dropdown?

Answer 1

You would be way better of using a subject for your personnels over triggering angulars change detection cycle way too often performance wise. But if you simply wonder why your solution doesn't work regardless of performance, you're pushing elements in your personnels object not actually changing the reference held by this.personnels. This means the angular change detection won't be triggered. If you do want to trigger the change detection, alter your "push" like this:

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

I found solution:

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;