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

Question

当我想使用 Open Layers 加载多个地图时，我在 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);
    }
  );
}

另一个问题我看到您在 forEach 循环中展开 maps 数组。

Answer 2

我使用 ViewChild 和 ngAfterViewInit:

解决了我的问题

@ViewChild('map') mapViewChild: ElementRef;

和

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

所以我在onInit函数中初始化地图，在ngAfterViewInit函数中设置标签目标

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

How to know if a tag is rendered in Angular?

openlayers

angular

angular6