Question

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

错误错误：ExpressionChangedAfterItHasBeenCheckedError：检查表达式后，表达式已更改。先前的值：'ngIf：[object 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();

带有Ngrx的ExpressionChangedAfterItHasBeenCheckedError

1 个答案: