时间戳

首页 > 解决方案 > Angular 谷歌地图——折线适用于 Stackblitz，但不适用于本地

angular-google-maps - Angular 谷歌地图——折线适用于 Stackblitz，但不适用于本地

问题描述

我需要在一个div标签内包装一个标签，agm-polyline这样它就可以在同一个标​​签上同时容纳一个ngFor和ngIf指令agm-polyline-point。例子：

  <agm-polyline [strokeColor]="'blue'">
      <div *ngFor="let waypoint of waypoints">
         <agm-polyline-point *ngIf="boolean" [latitude]="waypoint.lat" [longitude]="waypoint.lng"></agm-polyline-point>
      </div>
  </agm-polyline>

从 localhost:4200 在我的计算机上访问时，在折线中添加包装的div结果不再显示在我的浏览器中。但是，当我在 Stackblitz 上运行代码时，它运行良好。

任何想法为什么会发生这种情况？我在 @agm/core 的两个版本（1.0.0 和 3.0.0-beta.0）上本地尝试过，每次都得到相同的结果。

Github 在这里。

标签： angular-google-maps

解决方案

使用 ng-container 代替 div。

当您使用 div 标签时，它们会被插入到 DOM 中，这会干扰页面的样式和结构。

相反，ng-container 标签被排除在 DOM 之外，但可以像现在一样使用 ngIf 和其他 Angular 构造。

<agm-map [latitude]="lat" [longitude]="lng">
  <agm-polyline [strokeColor]="'blue'">
    <ng-container *ngFor="let waypoint of waypoints">
       <agm-polyline-point *ngIf="boolean" [latitude]="waypoint.lat" [longitude]="waypoint.lng"></agm-polyline-point>
    </ng-container>
  </agm-polyline>
</agm-map>

推荐阅读