Question

当我想使用“打开图层”加载多个地图时，我在Angular应用中有此代码：

<div *ngFof="let map of maps">
    <map id="{{ 'map' + map.id }}" class="map"></map>
</div>

在我的组件中，当我尝试通过ID（目标）获取此地图时，似乎地图标签尚未准备好，因此未显示该地图。

ngOnInit() {
    this.mapService.getMaps().subscribe(
        resp => {
            this.maps = resp;
        },
        error => {
            console.log(error);
        }
    );
}

ngAfterViewInit() {
   this.maps.forEach(item => {
       let map = new ol.Map({
       target: 'map' + item.id,
       layers: [
           new ol.layer.Tile({
               source: new ol.source.OSM()
           })
       ],
       view: new ol.View({
           center: ol.proj.fromLonLat([0, 0]),
           zoom: 2
           })
       });

       this.maps.push(map);
   });
}

我尝试了几种看到谷歌搜索的解决方案，但是我无法运行我的代码，因此在创建地图（new ol.Mapl(...)）时map标签尚未呈现。

Answer 1

我认为您的getMaps订阅会在ngAfterViewInit代码之后触发，那时maps变量将为空。

在将值分配给地图后，尝试将for循环放入。

ngOnInit() {
 this.mapService.getMaps().subscribe(
     resp => {
         this.maps = resp;

         this.maps.forEach(item => {
            let map = new ol.Map({
            target: 'map' + item.id,
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.OSM()
                })
            ],
            view: new ol.View({
                center: ol.proj.fromLonLat([0, 0]),
                zoom: 2
                })
            });

           this.maps.push(map);
       });
    },
    error => {
        console.log(error);
    }
  );
}

另一个问题是，我在maps循环中扩展了forEach数组。

Answer 2

我使用ViewChild和ngAfterViewInit解决了我的问题：

@ViewChild('map') mapViewChild: ElementRef;

和

ngAfterViewInit() {
    this.map.setTarget(this.target);
}

因此，我在onInit函数中初始化了地图，并在ngAfterViewInit函数中设置了标签目标。

如何知道标签是否在Angular中呈现？

2 个答案: