angular - ngOnChanges スローエラー「ExpressionChangedAfterItHasBeenCheckedError」を使用した Angular Material Change Detection

Question

コンポーネントの入力プロパティがあり、現在のデータが未定義でない場合にのみ表示する必要があります。

変更を検出するために 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

エラーを解決する方法はありますか。