Mat Snackbar не отображается должным образом при вызове внутри чтения файлов в угловых 6

Question

Снэк-бар не отображается в центре сверху, показывая правую сторону.После щелчка по экрану в любом месте он показывает правильно.

saveDoc(){
......
 var reader = new FileReader();
            reader.readAsDataURL(blob);
  reader.onloadend = () => {
                var encodedData = reader.result;
                this._service.saveDoc(url, encodedData).subscribe((data) => {
                    console.log(data);
                    this. showSnackBar('Annotation Saved', 2000)
                });
}

 showSnackBar(message: string): void {
        this._matSnackBar.open(message, 'OK', {
            verticalPosition: 'top',
            duration: 2000,
        });
    }

Та же проблема возникает, если я также использую MatDialog, правильно показываю диалог, закрываю этот диалог автоматически через 3 секунды, используя setTimeout, но он не закрывается.Если я нажимаю на экран, он закрывается

Answer 1

Пара несвязанных вещей:

• Я бы рекомендовал использовать const вместо var;
• this.showSnackBar принимает 1 аргумент, но вы передаете 2;

Чтобы исправить вашу проблему, вы можете попробовать использовать ngZone:

  reader.onloadend = () => {
    const encodedData = reader.result;
    this._service.saveDoc(url, encodedData).subscribe((data) => {
      console.log(data);
      this._ngZone.run(() => {
        this.showSnackBar('Annotation Saved');
      })
    });
  }

В вашем конструкторе:

constructor(private _ngZone: NgZone) {}