在 Angular 16 中的 ngFor 中创建唯一引用

Question

看起来 ngFor 指令在创建谷歌地图地图标记时只允许单个引用。 如何为数组中的每个标记创建唯一的引用？

我得到的结果是标记全部创建，但在显示信息窗口时，每个标记的信息窗口中都会显示相同的信息。

 ` <map-marker 
    *ngFor="let marker of markers"
    #mark="mapMarker"
    [position]="marker.position"
    [title]="marker.title"
    [icon]="marker.icon"
    (mapClick)="openInfoWindow(mark)">
  </map-marker>

  <map-info-window>
    Name: {{pageName}} <br>
    Type: {{type}} <br>
    Status: <br>
    <button type = "button"
    (click)="SetPage(pageName)">Open Page</button>
  </map-info-window>`

我尝试将引用放在 ngFor 的内部和外部，但结果是相同的。有什么想法吗？

Answer 1

您面临的问题可能与循环中如何处理引用有关。如果您希望每个标记都有唯一的引用，则可以使用索引生成动态引用。 请注意，我没有测试此代码，只是一个示例

<ng-container *ngFor="let marker of markers; let i = index">
  <map-marker 
    #mark="mapMarker"
    [position]="marker.position"
    [title]="marker.title"
    [icon]="marker.icon"
    (mapClick)="openInfoWindow(markers[i])">
  </map-marker>

  <map-info-window *ngIf="markers[i]">
    Name: {{markers[i].pageName}} <br>
    Type: {{markers[i].type}} <br>
    Status: <br>
    <button type="button" (click)="SetPage(markers[i].pageName)">Open Page</button>
  </map-info-window>
</ng-container>