Javascript 如何从其他组件更新mat自动完成选项？

在我的应用程序中，我有两个组件，称为Employee和Form。EmployeeComponent中有两个mat自动完成：州和城市列表。我使用“formData”参数填充这些mat自动完成控件并将其传递给FormComponent：

员工组成部分：

html

表单组件：

html

---

此时，当我选择一个我想要的州时，城市列表被清除，并且由所选州的城市填充。那么，我应该在哪里处理这个问题呢？在EmployeeComponent上还是在FormComponent上？hoca我应该用一个优雅的解决方案来设置城市列表选项吗？

首先，使用2-mat自动完成。这意味着相同的功能和行为。在这种情况下，我更喜欢为该部件使用可重用组件

父组件中的html

@组件({
选择器：“应用程序自定义”，
模板：“{a}}”，
})
导出类自定义组件{
@输入（）数据：字符串[]=[]；
}

父组件中的html

城市

<form #form [formData]="formControls"></app-form>

formControls = [];
states: StateDto[] = [];
cities: CityDto[] = [];

// fill employee list
getStates() {
    this.demoService.getStates().subscribe((data: StateDto) => {
      this.states = data;
    });
}

getCities() {
    this.demoService.getCities().subscribe((data: CityDto) => {
      this.cities = data;
    });
}

// create for data array
this.formData = [
  {
    id: 'states',
    type: 'custom-autocomplete',
  },
  {
    id: 'cities',
    type: 'custom-autocomplete',
  }
]


// set form control's list data
this.formControls = this.formData.map(item => {
  if (item.id === 'states') {
    item.options = this.states;
  }
  else if (item.id === 'cities') {
    item.options = this.cities;
  }
  return item;
});

@Input() formData = [];
options = {};

ngOnInit() {
    //code omitted for brevity
    this.autocompleteControl.forEach(item => {
        // here I set each autocomplete's options
        this.options[item.id] = item.options;
    });
}