Angular 8 #ExpressionChangedAfterItHasBeenCheckedError

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'display: none'. Current value: 'display: block'.

 

앵귤러에서 dom의 변화를 감지하도록 해야 해결된다.

import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
    selector: 'sample',
    template: `
    <div id="sample" [ngStyle]="{'display': display}">
        <div>
        </div>
    </div>
    `    
})
export class Sample{
    public display = 'none';

    constructor(private cdr: ChangeDetectorRef) {}

    present() {
        this.display = 'block';
        this.cdr.detectChanges();
    }

    dismiss() {
        this.display = 'none';
        this.cdr.detectChanges();
    }
}