时间戳

首页 > 解决方案 > 在多个 MatSelect 中，重新启用的复选框显示为已禁用

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

问题描述

使用 Angular Material，我想在一段时间内禁用多个 <MatSelect> 中的复选框（因为数据是从 API 检索的）。我可以成功地做到这一点，但是复选框的 CSS 类不会变回来。换句话说，该复选框在功能上处于启用状态，但 CSS 显示为禁用。这是材料缺陷还是我可以解决的问题？

示例：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>

标签： angularangular-material

解决方案

似乎以编程方式禁用 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>

推荐阅读