Angular Material Select (выбор мата) не отображается, когда Angular Google Maps в полноэкранном режиме

Question

Я использую Angular Material и Angular Google Maps.У меня есть форма Angular Material в Snazzy-Info-Window, которая отлично работает в обычном режиме.Он отображает выбор циновки красиво, но когда я нажимаю полноэкранную кнопку, опции циновки в выборе циновки не отображаются.Как только я выхожу из полноэкранного режима, я вижу панель параметров.

Это ошибка или я что-то упустил.Параметры раскрывающегося списка отображаются, если я использую собственный выбор, но не выбор матов.

НОРМАЛЬНЫЙ РЕЖИМ

РЕЖИМ ПОЛНОГО ЭКРАНА

В полноэкранном режиме Google Maps mat-select непоказать панель, но она есть, когда я ее проверяю.

Answer 1

Команда Angular Material имеет оверлейный контейнер, который поддерживает полноэкранный режим.

В определении @NgModule вашего корневого модуля, вероятно, в файле app.module.ts, сделайте следующее:

import {FullscreenOverlayContainer, OverlayContainer} from '@angular/cdk/overlay';

@NgModule({
    ...
    providers: [
        {provide: OverlayContainer, useClass: FullscreenOverlayContainer}
    ],
    ...
})

Теперь все компоненты материала, которые используют оверлейный контейнер, будут работать в полноэкранном режиме.

Answer 2

Это проблемы, вызванные проектированием с перекрытием, попробуйте это

и, самое главное, не забудьте поставить его на styles.scss (в корневой папке)

.cdk-overlay-container {
  z-index: 1050 !important;
}

ИЛИ

.cdk-overlay-container {
  z-index: 99999 !important;
}

ИЛИ

  .cdk-global-overlay-wrapper, .cdk-overlay-container {
     z-index: 99999 !important;
  }