使用ngOnChanges抛出错误的角度材质更改检测,“ ExpressionChangedAfterItHasBeenCheckedError”

时间:2018-11-02 23:44:57

标签: angular angular-material angular5 angular6 angular-changedetection

我具有组件的Input属性,并且仅当当前数据未定义时才显示。

我正在使用ngOnChanges来检测更改,但是它抛出“ ExpressionChangedAfterItHasBeenCheckedError ”错误。

这是代码,

  ngOnChanges(changes: { [propName: string]: SimpleChange}) {
if (changes['message'].currentValue) {
  this.open();
}}


open() {
    let config = new MatSnackBarConfig();
    config.verticalPosition = this.verticalPosition;
    config.horizontalPosition = this.horizontalPosition;
    config.duration = this.setAutoHide ? this.autoHide : 0;
    config.extraClasses = this.addExtraClass ? ['test'] : undefined;
    this.snackBar.open(this.message, this.action ? this.actionButtonLabel : undefined, config);
}

Stackblitz链接:https://stackblitz.com/edit/angular-snackbar-top-bdmsmz

有什么办法可以解决该错误。

Stackblitz error message

2 个答案:

答案 0 :(得分:1)

这是与Angular生命周期事件有关的问题。

一种解决此问题的快速方法是将行为异常的代码包装在 RegisterRequest registerRequest = new RegisterRequest(username,password,isadmin, responseListener,errorListener); 函数中,在本例中为snackBar.open调用

setTimeout

Demo

答案 1 :(得分:1)

错误以这种方式发生:

    ngOnChanges(changes: { [propName: string]: SimpleChange}) {
        setTimeout(()=>{
      if (changes['message'].currentValue) {
          this.open();
        }
        })
      }