为什么用* ngif更改状态后,Angular 2中的ngx-leaflet无法渲染地图

时间:2018-11-10 12:43:28

标签: angular ngx-leaflet

我对角度2的ngx-leaflet组件有疑问。 在地图出现时,将* 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) {
}    

1 个答案:

答案 0 :(得分:2)

将吸气剂用于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