在 Angular 中渲染多个传单地图

Question

我正在尝试使用 angular 在同一页面上呈现多个传单地图。 ngFor 用于动态渲染地图。地图的数量取决于从 REST 服务接收的数据。

ma​​p.component.html

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

ma​​p.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()还没有完成。