HTML 找不到嵌套在 mat-grid-tile 中的元素

Question

我尝试在 mat-grid-list 的 mat-grid-tile 中显示 openlayers 地图。

模板片段：

<mat-grid-list cols="3" rowHeight="100px">[...]
<mat-grid-tile
      colspan="1"
      rowspan="5">
        <div
          id="map"
          class="map">
        </div>
      </div>
    </mat-grid-tile>[...]
</mat-grid-list>

openlayers地图在打字稿文件中初始化。片段：

import OlTileLayer from 'ol/layer/Tile';
import OlMap from 'ol/Map';
import OlOverlay from 'ol/Overlay';
import * as proj from 'ol/proj';
import OlXYZ from 'ol/source/XYZ';
import OlView from 'ol/View';
import OlFeature from 'ol/Feature';
import OlVectorSource from 'ol/source/Vector';
import OlStyleStyle from 'ol/style/Style';
import OlIconStyle from 'ol/style/Icon';
import OlOsmSource from 'ol/source/OSM';
import OlVectorLayer from 'ol/layer/Vector';
import OlPoint from 'ol/geom/Point';

[...]
  map: OlMap;
  popup: OlOverlay;
  source: OlXYZ;
  layer: OlTileLayer;
  view: OlView;
  olOverlay: OlOverlay;
  olFeature: OlFeature;
  markerSource: OlVectorSource;
  markerStyle: OlStyleStyle;

ngAfterViewInit(): void {
    this.setMarkerSource();
    this.setMarkerStyle();
    this.setMap();
  }

 private setMap() {
    this.map = new OlMap({
      target: 'map',
      layers: [
        new OlTileLayer({
          source: new OlOsmSource()
        }),
        new OlVectorLayer({
          source: this.markerSource,
          style: this.markerStyle
        })
      ],
      view: new OlView({
        center: proj.fromLonLat([7.35077565, 49.92363955]),
        zoom: 7
      })
    });
  }

  private setMarkerSource() {
    this.markerSource = new OlVectorSource();
  }

  private setMarkerStyle() {
    this.markerStyle = new OlStyleStyle({
      image: new OlIconStyle(
        /** @type {olx.style.IconOptions} */ ({
          opacity: 0.75,
          src: 'path-to-icon.png'
        })
      )
    });
  }

问题是，无法设置目标属性，因为找不到 ID 为 'map' 的 div。我也试过 document.getElementById('map') 但它是空的。首先，我在 ngOnInit() 中进行了地图初始化，然后将其移动到 ngAfterViewInit()。另一种方法是这样写 div：

<div #mapDiv class="map></div>

并在 ts 文件中调用它：

@ViewChild('mapDiv')
  mapDiv: ElementRef;
[...]
this.map = new OlMap({
      target: this.mapDiv.nativeElement,
[...]

但它说 this.mapDiv 未定义。如果我将地图 div 设置在 mat-grid-tile/mat-grid-list 之外，它就可以正常工作。

如何将地图放在 mat-grid-tile 中？非常感谢。

Answer 1

非常感谢您的评论。事实上，在停止并重新启动应用程序后，上面的代码可以正常运行。不知道是什么问题。

HTML 找不到嵌套在 mat-grid-tile 中的元素

HTML element nested in mat-grid-tile cannot be found

openlayers

angular-material

angular7