Question

在我的角度代码中，管理页面列出了数据表组件中的项目，一旦单击其中一个数据项，管理员权限组件就会打开并显示与所单击的项目相关的数据。

点击后我收到此错误：

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.
    at viewDebugError (core.es5.js:8434)
    at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8412)
    at checkBindingNoChanges (core.es5.js:8576)
    at checkNoChangesNodeInline (core.es5.js:12448)
    at checkNoChangesNode (core.es5.js:12422)
    at debugCheckNoChangesNode (core.es5.js:13202)
    at debugCheckDirectivesFn (core.es5.js:13104)
    at Object.eval [as updateDirectives] (AdminComponent.html:21)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13086)
    at checkNoChangesView (core.es5.js:12242)

我创建了admin-right子组件

后开始出错

admin.component.html：

<data-table [table]='table' [data]="data" (onSelect)="onItemSelect($event)"></data-table>

<admin-right *ngIf="showRight"
[item]="item"
[rightContent]="rightContent"></admin-right>

数据table.component.ts：

@Component({
 ...
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class DataTableComponent implements OnInit {

  constructor(
    private cdRef:ChangeDetectorRef
  ) { } 
  ngOnInit() {
    this.cdRef.detectChanges();
  }

right.component.ts：

@Component({
 ....
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class RightComponent implements OnInit {

  @Input()  item;
  @Input()  rightContent;

  constructor( private cdRef:ChangeDetectorRef) { }

  ngOnInit() {
    this.cdRef.detectChanges();
  }

Answer 1

这个错误来自于在Angular的生命周期中已经检查过变量的事实，并且在生命周期结束后您尝试更改它。

这很常见，通常在生产模式下不会再现错误。

如果您想更正它，或者您没有更改变量的值，或者您使用setTimeout(() => {/* what you do after the user clicked here */})处理点击的超时

Angular4 / ngrx - ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后发生了变化

1 个答案: