angular - 在多个 MatSelect 中，重新启用的复选框显示为禁用

Question

使用 Angular Material，我想在一段时间内禁用多个 中的复选框(因为数据是从 API 检索的)。我可以成功地做到这一点，但是复选框的 CSS 类不会变回。换句话说，复选框在功能上已启用，但 CSS 显示为已禁用。这是 Material 缺陷还是我可以修复的问题？

示例:https://stackblitz.com/edit/angular-jqzx99

组件:

export class AppComponent  {
  @ViewChildren(MatOption) matSelectOptions: QueryList<MatOption>;

  public isPaused = false;
  public optionData = ['Foo', 'Bar', 'Baz'];

  /**
   * Disable MatSelect checkboxes for 2 seconds
   */
  public disableCheckboxes(): void {
    this.isPaused = true;
    this.matSelectOptions.forEach(option => option.disabled = true);

    setTimeout(() => {
      this.isPaused = false;
      this.matSelectOptions.forEach(option => option.disabled = false);
    }, 2000);
  }
}

模板:

<mat-form-field>
    <mat-select multiple
                [disabled]="isPaused"
                (selectionChange)="disableCheckboxes()">
        <mat-option *ngFor="let option of optionData">
            {{option}}
        </mat-option>
    </mat-select>
    <mat-placeholder>Example</mat-placeholder>
</mat-form-field>

<p id="loadingStatus">{{isPaused ? 'Pausing…' : ''}}</p>

Answer 1

似乎以编程方式禁用 MatOptions 对象并不是一个好主意。

所以仅使用 isPaused 进行选择和选项就可以了

组件:

export class AppComponent  {
  @ViewChildren(MatOption) matSelectOptions: QueryList<MatOption>;

  public isPaused = false;
  public optionData = ['Foo', 'Bar', 'Baz'];

  /**
   * Disable MatSelect checkboxes for 2 seconds
   */
  public disableCheckboxes(): void {
    this.isPaused = true;

    setTimeout(() => {
      this.isPaused = false;
    }, 2000);
  }
}

模板:

<h3>Disabled MatSelect Checkbox Problem:</h3>

<hr>

<mat-form-field>
    <mat-select multiple
                [disabled]="isPaused"
                (selectionChange)="disableCheckboxes()">
        <mat-option *ngFor="let option of optionData" [disabled]="isPaused">
            {{option}}
        </mat-option>
    </mat-select>
    <mat-placeholder>Example</mat-placeholder>
</mat-form-field>

<p id="loadingStatus">{{isPaused ? 'Pausing…' : ''}}</p>