javascript - Angular 4 Error: Expression has changed after it was checked - Stack Overflow

admin管理员组

文章数量:1323730

I am using Angular Material in my Angular 4 app. When I try to use the MatSnackBar in the ngAfterViewInit(), I am facing an error as:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'visible-bottom'.It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

I have used the ChangeDetectorRef to detect the changes, but it doesn't seem to work.

Here's the code I have been working on:

   constructor(private matSnackBar: MatSnackBar, private router: Router, private cdr: ChangeDetectorRef) { }

   ngOnInit() {}

   ngAfterViewInit() {
    let snackBarRef = this.matSnackBar.open('Redirecting to dashboard..', 'Cancel', {
      duration: 10000
    });

    snackBarRef.onAction().subscribe(() => {
      console.log("Cancelled");
    });


    this.cdr.detectChanges();
  }

Please help me resolve this issue.

I am using Angular Material in my Angular 4 app. When I try to use the MatSnackBar in the ngAfterViewInit(), I am facing an error as:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'visible-bottom'.It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

I have used the ChangeDetectorRef to detect the changes, but it doesn't seem to work.

Here's the code I have been working on:

   constructor(private matSnackBar: MatSnackBar, private router: Router, private cdr: ChangeDetectorRef) { }

   ngOnInit() {}

   ngAfterViewInit() {
    let snackBarRef = this.matSnackBar.open('Redirecting to dashboard..', 'Cancel', {
      duration: 10000
    });

    snackBarRef.onAction().subscribe(() => {
      console.log("Cancelled");
    });


    this.cdr.detectChanges();
  }

Please help me resolve this issue.

• javascript
• angular
• angular-material2

Share Improve this question Follow edited Nov 28, 2017 at 11:33 starlight asked Nov 28, 2017 at 11:29 starlightstarlight 78544 gold badges1616 silver badges3131 bronze badges 3

• Did you try moving this.cdr.detectChanges(); inside the onAction().subscribe(() => {}); – Amit Chigadani Commented Nov 28, 2017 at 12:05
• @AmitChigadani That doesn't work! – starlight Commented Nov 28, 2017 at 12:08
• Try to create a working plunker to replicate the error. Provided code won't help much. – Amit Chigadani Commented Nov 28, 2017 at 12:16

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

One potential but crude solution is to use setTimeout -

let snackBarRef;
setTimeout(() => {
    snackBarRef = this.matSnackBar.open('Redirecting to dashboard..', 'Cancel', {
      duration: 10000
    });
});

please refer https://github./angular/material2/issues/6158 for more information.

Try to move snackbar in your constructor:

constructor(private matSnackBar: MatSnackBar, private router: Router, private cdr: ChangeDetectorRef) {
  let snackBarRef = this.matSnackBar.open('Redirecting to dashboard..', 'Cancel', {
    duration: 10000
  });
  snackBarRef.onAction().subscribe(() => {
    console.log("Cancelled");
  });
}

本文标签： javascriptAngular 4 Error Expression has changed after it was checkedStack Overflow