Question

我有一个latlng数组，我想从该数组显示角度组件上的map。我使用了QueryList<ElementRef>，但它却抛出了 ERROR 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

我想对任何对为什么将ng-template替换为div的人感兴趣的人进行跟进：

按角度docs：

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中拾取它。

Answer 2

您编写了循环代码并在位置循环内创建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);
});

要从latlng数组显示地图，我得到了错误：“ ERROR TypeError：无法读取未定义的属性'firstChild'

2 个答案: