Для отображения карты из массива latlng я получил ошибку: «ОШИБКА TypeError: Невозможно прочитать свойство firstChild of undefined»

Question

У меня есть массив значений, из которых я хочу показать карту на моем угловом компоненте. Я использовал QueryList<ElementRef>, но это вызывает у меня ОШИБКА TypeError: Невозможно прочитать свойство 'firstChild' из неопределенного

В index.html, наконец, к тегу body я применил maps.googleapis.com/maps/api/js с ключевым словом defer.

Вот мой код:

@ViewChildren('gmap') gmapElement: QueryList<ElementRef>;


ngAfterViewInit() {
    setTimeout(() => {
      if(this.location && this.location.length) {
        this.location.forEach(location => {
          this.gmapElement.forEach(mapToDisplay => {
            const latlng = new google.maps.LatLng(location.latitude, location.longitude);
            var mapProp = {
              center: latlng,
              zoom: 15,
              // mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            console.log('prop... ',mapToDisplay.nativeElement);
            this.map = new google.maps.Map(mapToDisplay.nativeElement, mapProp);
          })
        })
      }
    }, 5000)
  }

В файле шаблона,

<div class="col-lg-5 col-md-5 col-sm-5 col-xs-5" *ngFor="let location of locations" style="border: solid black 1px">
    <ng-template #gmap class="g-map"></ng-template>
</div>

Это бросает меня

«ОШИБКА TypeError: Невозможно прочитать свойство firstChild из неопределенного».

Пожалуйста, помогите мне

Answer 1

Вы написали код для цикла и создали gmap внутри цикла размещения.Поэтому все карты используют одинаковое местоположение.

Попробуйте следующий код.

this.gmapElement.forEach((mapToDisplay, index) => {
  const location = this.location[index];
  const latlng = new google.maps.LatLng(location.latitude, location.longitude);
  var mapProp = {
    center: latlng,
    zoom: 15,
    // mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  console.log('prop... ',mapToDisplay.nativeElement);
  this.map = new google.maps.Map(mapToDisplay.nativeElement, mapProp);
});

Answer 2

Я подумал, что буду следить за любопытными, почему замена ng-template на div была исправлением:

В угловых документах :

The <ng-template> is an Angular element for rendering HTML. It is never displayed 
directly. In fact, before rendering the view, Angular replaces the <ng-template> and 
its contents with a comment.

Таким образом, ссылочная переменная шаблона #gmap никогда не отображается и поэтому никогда не выбирается во ViewChildren.