Использование asyn c pipe с NgRx неправильно обновляет представление

Question

Я видел несколько вопросов, похожих на этот, но я все еще пытаюсь исправить ошибку в моем конкретном приложении. Я использую NgRx и Angular.

. html файл

• Внутри файла .html компонента у меня есть что-то вроде ниже. Я использовал async, чтобы получить последнее значение из наблюдаемого selectedOverlayLayers$. Как вы, возможно, догадались, идея состоит в том, чтобы захватить слои, которые выбрал пользователь, и отобразить их в списке.
• alterLayers() открывает диалоговое окно, в котором пользователь может изменить, какие слои «выбраны» "

<div class="body-wrapper">
  <div>
    <button mat-raised-button class="add-layers" (click)="alterLayers()">Alter Layers</button>
  </div>
  <div class="active-layers">
    <div *ngFor="let layer of (selectedOverlayLayers$ | async)" class="active-layer">
      <p>{{ layer.name }}</p>
    </div>
  </div>
</div>

файл component.ts

• component.ts имеет selectedOverlayLayers$, который получает значение массива выбранных слоев из NgRx хранит так:

selectedOverlayLayers$ = this.store.pipe(select(selectedOverlayLayers));

• Компонент также управляет открытием диалогового окна и использованием результата, полученного из диалогового окна, показанного пользователю, где они могут выбрать слой, который они хотели бы видеть. . Как только пользователь нажимает кнопку «Отправить», мы используем result, чтобы запустить действие, обновляющее хранилище новым значением.

alterLayers () {
  const dialogOpenSubscription = this.selectedOverlayLayers$.subscribe((selectedLayers) => {
    const layersDialog = this.dialog.open(LayersDialogComponent, {
      maxHeight: '90vh',
      data: {
        allPossibleLayers: this.groupedLayers.getValue(),
        selectedLayers: selectedLayers
      }
    });
    const layersDialogSubscription = layersDialog.afterClosed().subscribe(result => {
      if (result) {
        this.store.dispatch(updateSelectedOverlayLayers({ selectedLayers: result }));
      }
    });
    this.subscriptions.push(layersDialogSubscription);
    this.cdRef.markForCheck();
  })
  this.subscriptions.push(dialogOpenSubscription);
}

Проблема:

• Хранилище обновляется правильно с новым массивом, представляющим новый список выбранных слоев
• Однако пользовательский интерфейс не обновляется, пока я не нажму на вкладку или что-то в самом компоненте, и только тогда слои правильно отображаются в списке.

Я пробовал добавить private ngZone: NgZone в конструктор и запустить this.ngZone.run(() => this.store.dispatch(updateSelectedOverlayLayers({ selectedLayers: result }), но у меня это не сработало.