Angular Google 地图 – 多段线适用于 Stackblitz，但不适用于本地

Question

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

  <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>

添加包装 div 后，当从 localhost:4200 在我的计算机上访问时，多段线不再显示在我的浏览器中。但是，当我运行代码 on Stackblitz 时，它工作得很好。

知道为什么会这样吗？我已经在 @agm/core 的两个版本（1.0.0 和 3.0.0-beta.0）上本地尝试过，每次都得到相同的结果。

Github 是 here.

Answer 1

使用 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>

Angular Google 地图 – 多段线适用于 Stackblitz，但不适用于本地

Angular Google Maps – polyline works on Stackblitz but not locally

angular-google-maps