ExpressionChangedAfterItHasBeenCheckedError with Ngrx

Question

Я знаю, что это может встречаться несколько раз, но я не могу найти чистый эффективный способ решить эту проблему. У меня есть фрагмент кода, подобный этому <div *ngIf="userUsername$ | async as username"></div>, и когда я запускаю, я получаю эту

ОШИБКА: ExpressionChangedAfterItHasBeenCheckedError: Выражение изменилось после того, как оно было проверено. Предыдущее значение: 'ngIf: [объект объекта]'. Текущее значение: 'ngIf: admin'.

в моем component.ts userUsername$ = this.store.pipe(select(selectSelectedUsername));

Есть ли эффективный способ исправить это, чем setTimeout?

Спасибо,

ОБНОВЛЕНИЕ

весь код компонента согласно запросу

import { Component, OnInit, ChangeDetectorRef, ChangeDetectionStrategy, OnDestroy } from '@angular/core';
import { select, Store } from '@ngrx/store';
import { selectSelectedUsername } from '../state-management/selectors/user.selector';
import { IAppState } from '../state-management/state/app.state';

@Component({
  selector: 'my-layout',
  templateUrl: './layout.component.html',
  styleUrls: ['./layout.component.sass']
})
export class LayoutComponent implements OnInit, OnDestroy {

  userUsername$ = this.store.pipe(select(selectSelectedUsername));

  constructor(
    private store: Store<IAppState>
  ) {
  }

  ngOnInit() { }

  ngOnDestroy() { }

}

Answer 1

, если вы хотите решить эту ошибку, чтобы вы могли использовать это

import {ChangeDetectorRef } from '@angular/core';

  constructor(
    title: Title,
    private cdr: ChangeDetectorRef){ }


 this.cdr.detectChanges();

Примечание: **** После изменения значения вашей переменной для использования этой строки

this.cdr.detectChanges();