почему ngx-leaflet в angular 2 не отображает карту после изменения состояния на * ngif

У меня проблема с компонентом ngx-leaflet из angular 2. после изменения состояния * ngif с true на false и снова с false на true, пока отображалась карта, рендеринг тайлов не происходил. что мне делать, чтобы избежать этой проблемы?

это мой html-код

<button (click)="showMap=!showMap">toggle</button>
<div *ngif="showMap">
  <div [style.height.px]="mapHeight" leaflet
       (leafletClick)="mapOnClick($event)"
       [(leafletCenter)]="mapCenter"
       [leafletOptions]="options"
       (leafletMapReady)="onMapReady($event)"
       [leafletLayers]="layers">
  </div>
</div>

это мой машинописный код

options = {
  layers: [
    tileLayer('http://tile.openstreetmap.org/...', 
    { maxZoom: 18, attribution: '...' })
  ],
  zoom: 12,
  center: latLng(35.679966, 51.4)
};

map = null;

onMapReady(map: Map) {
  this.map = map; 
}

mapOnClick(evt) {
}

angular ngx-leaflet
person mj. rahmati    schedule 10.11.2018    source источник
comment
Рассмотрите возможность создания образца StackBlitz, воспроизводящего вашу проблему.   -  person SiddAjmera    schedule 10.11.2018
comment
это URL редактора: stackblitz.com/edit/angular-ulaosg   -  person mj. rahmati    schedule 10.11.2018
comment
я не знаю, почему это приложение не показывает карту   -  person mj. rahmati    schedule 10.11.2018

Ответы (1)


arrow_upward
5
arrow_downward

Используйте геттер для options.

  get options(){
    return {
    layers: [
      tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '...' })
    ],
    zoom: 5,
    center: latLng(46.879966, -121.726909)
    }
  };

Вот рабочая копия - https://stackblitz.com/edit/angular-w3ugkr

person Sunil Singh    schedule 10.11.2018