HTML-элемент, вложенный в mat-grid-tile, не найден - PullRequest
Новая
       15

HTML-элемент, вложенный в mat-grid-tile, не найден

0 голосов
/ 02 ноября 2018

Я пытаюсь показать карту открытых слоев в 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 инициализируется в файле машинописного текста. Отрывок: 

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

Проблема в том, что целевое свойство не может быть установлено, так как не может быть найден div с идентификатором 'map'. Я также пытался с 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? Большое спасибо.

1 Ответ

0 голосов
/ 05 ноября 2018

Большое спасибо за ваш комментарий. Фактически, после остановки и перезапуска приложения вышеуказанный код работает без сбоев. Понятия не имею, в чем проблема.

...