Ошибка: «Контейнер карты не найден» при использовании «ngfor» - PullRequest
Новая
       88

Ошибка: «Контейнер карты не найден» при использовании «ngfor»

0 голосов
/ 30 мая 2020

Среда: Angular 9, Leaflet 1.6.0 ngx-leaflet 7.0.0

Фон: я могу создавать несколько карт, создавая отдельные «div» и «параметры» без каких-либо проблем с прокомментированной частью из html

когда я переключаюсь на использование «ngfor» для создания нескольких карт на одной странице, я получаю указанную выше ошибку, трассировка стека находится ниже.

Фрагмент кода: realtimedashb.component. html

<!-- <div id="testmap">
  </div> 
  <div id="testmap2">
  </div> -->
  <div *ngFor="let widget of widgets; let w = index" class="col-md-{{widget.width}}">
    <div #id="map{{widget.name}}" >
  </div>
  </div>

realtimedashb.component.ts 

import * as L from 'leaflet';

@component

leafletoptions(widget){

// this code works fine for hardcoded div's
/* const map = L.map('testmap').setView([50.6311634, 3.0599573], 4);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Test Map',
maxZoom: 12
}).addTo(map);
var marker = new L.Marker(new L.LatLng(40.6311634, 3.0599573), {
});
map.addLayer(marker);
map.invalidateSize(true);
const map2 = L.map('testmap2').setView([50.6311634, 3.0599573], 4);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Test Map',
maxZoom: 12
}).addTo(map2);
var marker = new L.Marker(new L.LatLng(40.6311634, 3.0599573), {
});
map2.addLayer(marker);
map2.invalidateSize(true);
*/

// Fails when I switch to ngfor and in this case parameter within L.Map is dynamic coming from backend, which is also used in the div.
var testmap = L.map(String(widget.name)).setView([50.6311634, 3.0599573], 4);
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: 'Test Map',
maxZoom: 12
}).addTo(testmap);
var marker = new L.Marker(new L.LatLng(50.6311634, 3.0599573), {
});
// testmap.invalidateSize(true);
testmap.addLayer(marker);
}

В консоли сообщена ОШИБКА. 

Error: Map container not found.
at NewClass._initContainer (leaflet-src.js:4097)
at NewClass.initialize (leaflet-src.js:3131)
at new NewClass (leaflet-src.js:301)
at Object.createMap [as map] (leaflet-src.js:4718)
at RealtimeDashbComponent.leafletoptions (realtimedashb.component.ts:1749)
at RealtimeDashbComponent.setWidgetData (realtimedashb.component.ts:2076)
at realtimedashb.component.ts:1718
at Array.forEach ()
at SafeSubscriber._next (realtimedashb.component.ts:1715)
at SafeSubscriber.__tryOrUnsub (Subscriber.js:183)

Я также пробовал следующие комбинации

жестко запрограммированный div и параметры - работает

жестко запрограммированные параметры div и сервера l oop - работают

проблема возникает при переключении с жестко запрограммированного div на ngfor. Я вижу, что div назначается правильному идентификатору, переданному в widget.name, а также отражается на изображении по этой ссылке. листовка sr c ошибка файла

...