Angular4/ngrx - ExpressionChangedAfterItHasBeenCheckedError：チェックされた後に式が変更されました

Question

私の角度コードでは、管理ページにデータテーブルコンポーネント内のアイテムがリストされ、データアイテムの1つがクリックされると、クリックされたアイテムに関連するデータ。

は、かつて私はこのエラーを取得するクリック：私は管理者の右の子コンポーネントを作成したら

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> 

data-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

このエラーは、変数が角度のライフサイクル中にチェックされていることを、あなたはライフサイクルが終了した後にそれを変更しようとしたという事実から来ています。

これは非常に一般的なことです。通常、エラーは本番モードでは再生されません。

修正する場合は、変数の値を変更しないでください。または、クリックを処理するタイムアウトを使用してください