Javascript 如何在angular 7动态表单中填充相关下拉列表？

我有一个动态表单，它有多个下拉列表，其中一个下拉列表依赖于另一个下拉列表。问题是我无法填充dependent下拉列表

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

导出类InputDropdown扩展InputBase{
controlType=‘dropdown’；
选项：{value:string，label:string}[]=[]；
showSelect=false；
多重=假；
构造函数（选项：{}={}）{
超级（期权）；
this.options=选项['options']| |[]；
this.showSelect=options['showSelect']| | false；
this.multiple=options['multiple']| | false；
}
}

---

如何根据上一个下拉列表填充

personnelId

下拉列表？

您最好为您的人员使用主题，而不是频繁地触发角度变化检测循环。但是，如果您只是想知道为什么无论性能如何，您的解决方案都不起作用，那么您是在推动personnels对象中的元素，而不是实际更改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);
          }
        }
      }
    );
  }

我找到了解决办法：

（（this.InputBase[]）。查找（i=>i.key==='personelid'）作为InputDropdown。选项=选项；

它没有像你说的那样工作。仍然没有填充

personelid

下拉列表。您的

InputDropdown

类是什么样子的？这并没有回答

InputDropdown

类是什么样子的。我担心它只会在OnInit上设置模板上的选项，这意味着它本质上不能在不重新命名整个下拉列表的情况下进行更改。这个补丁值是行不通的。它不设置选项，而是设置当前值。对于数组…我正在调用

bind

函数来调用它。这有问题吗？我认为您需要更改订阅功能中的personnelDropdown.options（或者pehafs在“personnelDropdown”之前没有定义“personnels”，但我不确定最后一个选项）

personnels

在

personnelDropdown

之前已经定义过。

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

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

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;