如何在angular 7动态表单中填充依赖的下拉列表？

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-dynamic-form',
  templateUrl: './dynamic-form.component.html',
  styleUrls: ['./dynamic-form.component.css']
})
export class DynamicFormComponent {
  form: FormGroup;
  dependencyOptions: any[] = [];
  dependentOptions: any[] = [];

  constructor(private formBuilder: FormBuilder) {
    this.form = this.formBuilder.group({
      dependency: new FormControl(''),
      dependent: new FormControl('')
    });
  }

  onDependencyChange() {
    const selectedDependency = this.form.get('dependency').value;
    // 根据选中的依赖下拉列表项的值，生成需要填充的下拉列表的选项
    this.dependentOptions = this.getDependentOptions(selectedDependency);
    // 更新依赖下拉列表的值
    this.form.get('dependent').setValue('');
  }

  getDependentOptions(dependency: string): any[] {
    // 根据依赖下拉列表项的值，返回需要填充的下拉列表的选项
    // 可以根据业务需求从后端获取数据或者使用静态数据
    // 返回的数据格式为数组，每个元素包含label和value属性
    // 例如：[{ label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }]
    return [];
  }
}

<form [formGroup]="form">
  <div>
    <label for="dependency">Dependency:</label>
    <select id="dependency" formControlName="dependency" (change)="onDependencyChange()">
      <option value="">Select Dependency</option>
      <!-- 使用ngFor循环生成依赖下拉列表的选项 -->
      <option *ngFor="let option of dependencyOptions" [value]="option.value">{{ option.label }}</option>
    </select>
  </div>
  <div>
    <label for="dependent">Dependent:</label>
    <select id="dependent" formControlName="dependent">
      <option value="">Select Dependent</option>
      <!-- 使用ngFor循环生成需要填充的下拉列表的选项 -->
      <option *ngFor="let option of dependentOptions" [value]="option.value">{{ option.label }}</option>
    </select>
  </div>
</form>