Angular4/ngrx - ExpressionChangedAfterItHasBeenCheckedError: Der Ausdruck hat sich nach der Überprüfung geändert

Question

In meinem eckigen Code führt die Admin-Seite Elemente in der Datentabelle-Komponente auf, sobald auf eines der Datenelemente geklickt wird, wird die Admin-Rechte-Komponente geöffnet und angezeigt Daten bezogen auf das angeklickte Objekt.

einmal klickte ich diesen Fehler:

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) 

begann ich den Fehler bekommen, wenn ich das Admin-rechte Kind Komponente erstellt

---

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

dieser Fehler kommt von der Tatsache, dass eine Variable während des Lebenszyklus von Angular geprüft wurde, und dass man versucht, es zu ändern, wenn der Lebenszyklus beendet ist.

Dies ist sehr häufig und in der Regel wird der Fehler im Produktionsmodus nicht reproduziert.

Wenn Sie möchten, um es zu korrigieren, entweder Sie nicht den Wert der Variablen ändern, oder Sie verwenden einen Timeout, wo Sie den Klick mit setTimeout(() => {/* what you do after the user clicked here */})

Griff