带Ngrx的ExpressionChangedAfterItHasBeenCheckedError

Question

我知道这可能会遇到好几次，但我找不到一个干净有效的方法来解决它。我有一段类似于这个<div *ngIf="userUsername$ | async as username"></div>的代码，当我运行时，我得到了这样的代码

错误: ExpressionChangedAfterItHasBeenCheckedError:表达式检查后发生了更改。以前的值：'ngIf: object对象‘。当前值：'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();