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

mat-grid-tile 的 mat-grid-list

模板片段:

<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映射在typescript文件中初始化。代码段:

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'
        })
      )
    });
  }

document.getElementById('map') 但它是空的。 首先我把地图初始化了 ngOnInit() ,然后我把它移到 ngAfterViewInit()

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

在ts文件中调用:

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

如果我把地图放在 / mat网格列表 ,工作正常。

我该怎么做才能把地图放在 垫格瓷砖 ?