Рендеринг нескольких листовок в Angular

Question

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

map.component.html

<div *ngFor="let m of mapIds">
    <div class="map" [id]="m"></div>
</div>

map.component.ts

[ Версия 1 ] - данные не заполняются в this.mapIds

ngOnInit() {
    PopulateData();

    // do other stuff
}

PopulateData() {            

    // Invoke Web service
    this.cService.getMapData(cInput).subscribe(
        (res: getMapData[]) =>
        {
            // form a list of mapIds
            this.mapIds = mapIds
        }
}

ngAfterViewInit() {
    // Initialize leaflet maps
    this.mapIds.forEach( x => {         // <--- this.mapIds is null
        this.maps[x] = L.map(x, {       
            attributionControl: false,
            minZoom: 3,
            maxZoom: 7,
            zoomControl: false
        });

        // rest of map initialization 
    })
}

[ Версия 2 ] выдает следующую ошибку

Ошибка: контейнер карты не найден.

ngOnInit() {
    PopulateData();

    // do other stuff

    InitMaps();
}

PopulateData() {            

    // Invoke Web service
    this.cService.getMapData(cInput).subscribe(
        (res: getMapData[]) =>
        {
            // form a list of mapIds
            this.mapIds = mapIds
        }
}

InitMaps() {
    // Initialize leaflet maps
    this.mapIds.forEach( x => {
        this.maps[x] = L.map(x, {        // <-- Error thrown here
            attributionControl: false,
            minZoom: 3,
            maxZoom: 7,
            zoomControl: false
        });

        // rest of map initialization 
    })
}

Можно ли подождать, пока this.mapIds не будет заполнено в версии 1 ? Или какие-либо другие предложения?

Answer 1

Вы сможете достичь того, что пытаетесь сделать, если переместите свой код ngAfterViewInit() в populateData()

populateData() {            
    // Invoke Web service
    this.cService.getMapData(cInput).subscribe(
        (res: getMapData[]) =>
        {
            res.forEach( x => {
                this.maps[x] = L.map(x, {       
                    attributionControl: false,
                    minZoom: 3,
                    maxZoom: 7,
                    zoomControl: false
                });                        
        }
}

Причина, по которой вы получаете this.mapIds is null, заключается в том, что в то времяngAfterViewInit() выполняется, PopulateData() еще не завершено.