Angular 角度材质反应形式，基于其他选择更新材质选择选项

我目前正在用Angular 6，Material 2创建一个仪表板。下面列出的版本

    "dependencies": {
    "@angular/animations": "^6.1.9",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.9",
    "@angular/compiler": "^6.1.9",
    "@angular/core": "^6.1.9",
    "@angular/forms": "^6.1.9",
    "@angular/http": "^6.1.9",
    "@angular/material": "^6.4.7",
    "@angular/material-moment-adapter": "^6.4.7",
    "@angular/platform-browser": "^6.1.9",
    "@angular/platform-browser-dynamic": "^6.1.9",
    "@angular/router": "^6.1.9",
    "@types/chart.js": "^2.7.37",
    "chart.js": "^2.7.2",
    "core-js": "^2.5.4",
    "moment": "^2.22.2",
    "rxjs": "^6.3.3",
    "zone.js": "~0.8.26"
  }

我创建了一个表单，用户可以在其中选择要包含在要生成的报告中的数据

我已经用反应式表单绑定了所有控件。问题在于两个mat select元素，第二个元素的选项取决于第一个select的值

即

如果select1.value==a，则select2将具有选项a\u 1、a\u 2等

如果select1.value==b，则select2将有选项b_1、b_2等

select2的值在HTML模板中使用绑定

<mat-option *ngFor="let item of dataSourceSelect.value?.units" [value]="item">{{item.toHTMLString()}}</mat-option>

当通过UI更改select1的值时，所有操作都按预期进行。我遇到的问题是，当我使用FormControl.setValueobj函数更新mat select的值时。我可以很好地更新select1的选定值，但是select2的值不会被设置，选项也不会基于select1的值加载

在搜索类似的情况后，我怀疑mat select的comparator是原因，但在将原始对象传递到.setValue或使用mat select的函数重写compareWith后，它仍然不起作用，因此我想知道是否有人可以在这里帮助我

我已经在一个

在stackblitz：更改第一次选择的值时，您将看到第二次选择的选项将更改，然后单击按钮，该按钮使用FormControl.setValueobj设置第一次选择的值，然后，第二次选择将根本没有任何选项。

我的方法是使用dataSourceControl控件的valueChanges属性并按预期工作

组成部分

  ngOnInit() {
    this.reportForm = this.formBuilder.group({
      dataSourceControl: ['', Validators.required],
      dataUnitControl: ['', Validators.required]
    });

    this.reportForm.get('dataSourceControl').valueChanges.subscribe(item => {
      this.units = item.units
    })

模板

valueChages方法返回发出最新 价值观因此，您可以订阅valueChanges以更新实例 变量或执行操作

---

感谢您的回复，我能够使用observable实现所需的行为。感谢您的帮助：

<mat-form-field>
  <label for="dataUnitSelect">Data unit: </label>
  <mat-select formControlName="dataUnitControl" required>
    <mat-option *ngFor="let item of units" [value]="item">{{item.toHTMLString()}}</mat-option>
  </mat-select>
  <mat-error *ngIf="reportForm.controls['dataUnitControl'].hasError('required')">Please choose a unit</mat-error>
</mat-form-field>