Angular 8 Аккордеон с картой не отображается

Question

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

https://stackblitz.com/edit/angular-jdbzhe

Если я изменю Поведение всегда отображать панель примерно так: class = "Свернуть шоу", тогда карта правильно инициализируется

Реализация https://getbootstrap.com/docs/4.1/components/collapse/

Answer 1

Проблема возникает из-за того, что у него есть display: none; в области, где предполагается визуализация холста.

Добавьте map.updateSize() к нему после того, как вы расширили свой аккордеон, и он работает!

Посмотрите на это рабочее редактирование StackBlitz Я сделал.

Answer 2

Я не знаком с библиотекой, которую вы используете для карт, но, поскольку вы нигде не указываете размеры, я предполагаю, что он автоматически изменяет размер элемента карты, чтобы соответствовать указанному торговцу.

Поскольку ваш контейнер parent установлен для отображения: ни один из классов «collapse», ширина и высота не будут установлены, то есть карта, скорее всего, будет иметь ширину 0 и высоту 0.

Я быстро проверил документы OL, и кажется, что вы можете использовать this.map.updateSize(); для обновления размеров карты в зависимости от размера контейнера. Как и когда его вызывать, зависит от вас - в текущей реализации я бы сказал, попробуйте прослушать изменения стиля в вашем компоненте app-map.

Односторонний совет - вместо использования "classi c" bootstrap попробуйте использовать одну из более дружественных angular сред, которые предоставят вам события и методы, значительно упростив работу с кодом в долгосрочной перспективе.