Angular 4 Mapbox создает несколько карт с помощью ngFor

Я пытаюсь создать несколько карт, используя *ngFor, но внутри компонента div id должен быть готов, прежде чем я назначу его переменной контейнера mapbox. К сожалению, если setTimeout не используется, выдается ошибка, что идентификатор карты не определен.

Мои компоненты html выглядят так:

<div class="css-map-custom" id="map{{mv_mapId}}"></div>

И соответствующий машинописный текст -

this.map = new mapboxgl.Map({
container: `map${this.mv_mapId}`, .....

И из-за ошибки «div id не найден» я должен поместить функцию рендеринга карты в ngOnInit с помощью setTimeout :(

Любое руководство относительно того, как исправить это более элегантным образом?


person Zia    schedule 06.07.2018    source источник
comment
Вы пытались использовать ngAfterViewInit вместо ngOnInit?   -  person Uğur Dinç    schedule 06.07.2018
comment
Спасибо чувак! Это сработало :)   -  person Zia    schedule 09.07.2018
comment
Рад слышать, что это сработало :)   -  person Uğur Dinç    schedule 09.07.2018


Ответы (1)


Если вам нужно получить доступ к DOM при «загрузке страницы», вы должны использовать ngAfterViewInit вместо ngOnInit.

Вкратце, вот такой порядок событий:

конструктор > ... ngOninit > ... создание шаблона > ... ngAfterViewInit

Подробнее об официальной документации по хукам жизненного цикла.

person Uğur Dinç    schedule 09.07.2018