Angular4 / ngrx-ExpressionChangedAfterItHaHasBeenCheckedError：檢查表達式后，表達式已更改

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.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 */})