В множественном MatSelect повторно включенный флажок показывает как отключенный

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>