Question

我目前正在Angular 6（材质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元素上，第二个元素的选项取决于第一个选择的值。

即

如果select1.value === a，则select2将具有选项a_1，a_2等。

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

使用

在HTML模板中绑定select2的值

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

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

在搜索了类似的案例之后，我怀疑是mat-select的比较器是原因，但是在将原始对象传递到.setValue()或覆盖了{{1}的compareWith函数之后}它仍然没有起作用，所以我想知道是否有人可以在这里帮助我。

我在Stackblitz

中加入了最少的复制代码

在堆栈闪电中：更改第一个选择的值，您将看到第二个选择的选项将更改，然后单击按钮，该按钮使用mat-select设置第一个选择的值，然后第二个选择根本没有任何选项。

Answer 1

我使用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
    })

模板

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

stackblitz demo

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

Angular Material反应形式，根据其他选择更新垫选择选项

1 个答案: