SnackBar не отображается в Angular 9

Question

У меня есть один SnackBar, который должен отображаться при входе в систему при вводе неверной информации, но когда это произойдет, SnackBar не показывает его перекрытие другим элементом, как я могу это исправить?

Здесь ниже я опишу, как я пытаюсь это сделать

sendAdmin() - это функция, вызываемая кнопкой на странице

snackMessage:string = 'Introduce valid data';

  constructor(private _builder:FormBuilder,private router: Router,
    private adminService: AdminService,public _snackBar: MatSnackBar) { }

    openSnackBar(message: string){
      this._snackBar.open(message, 'X', {
        duration: 3000,
      });
    }
  sendAdmin(){
    this.bSignIn = true;
    let formData = new FormData();
    formData.append('email', this.loginForm.get('email').value);
    formData.append('password', this.loginForm.get('password').value);

    this.adminService.validateAdminCredentials(formData)
    .subscribe(
      res => {
        this.bSignIn = false;
        let auxRes: any = res;

        if(auxRes.type == 'success'){
          let auxUser = {
            personId: auxRes.id,
            clientId: auxRes.client_id,
            firstName: auxRes.first_name
          }
          this.isSigned = true;
          localStorage.setItem('leadLoggedAdmin', JSON.stringify(auxUser));
          this.goToAdminDashboard(auxRes.first_name);
        }  
      },
      err => {
        this.bSignIn = false;
        this.openSnackBar(this.snackMessage);
        //window.alert('Introduce valid data');
      }
    );
  }

Также я импортирую import {MatSnackBar} from '@angular/material/snack-bar';

Вот как это выглядит сейчас, перекрытие

Answer 1

Я решаю это, помещая в нижнюю строку класс, например:

.behind{
  z-index: 10;
}

Answer 2

Как отображается этот компонент? Возможно ли, что этот компонент перерисовывается из-за ng-if или что-то в этом роде?

Answer 3

Попробуйте импортировать модуль MatSnackBarModule в app.module файл и удалить его импорт из общего модуля.

РЕДАКТИРОВАТЬ: Вы проверили свою консоль? Возникает ли какое-либо исключение?

Обновленный ответ

Я думаю, вам нужно установить позиционирование закусочной, используя verticalPosition как top

См. API

Answer 4

Вы должны импортировать MatSnackBarModule в свой модуль, где объявлен компонент. Если вы это сделали, убедитесь, что вы импортировали стиль темы материала в свой styles.scss или в styles раздел в angular.json.

Если элемент перекрывается, попробуйте следующее:

this._snackBar.open(message, 'X', {
   duration: 3000,
   panelClass: 'snack-bar'
});

И установите z-index: 99 в классе snack-bar. Вам нужно определить этот класс в styles.scss