Question

我想使用Angular Material在一段时间内禁用多个中的复选框（因为从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>

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>

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

1 个答案: