Angular中ngFor循环下实现OverlayPanel仅触发单个实例的问题求助

我来帮你搞定这个问题！核心原因是你用了全局的isOpen变量，所有通过*ngFor渲染的人物条目都会绑定同一个状态变量，所以只要这个变量变为true，所有OverlayPanel都会同时显示。另外你写的*ngIf="personsFiltered != person"逻辑本身就有问题——personsFiltered是异步数组，和单个person对象对比永远不成立，这也是ngIf没生效的原因。

下面是具体的修复方案：

步骤1：给每个人物单独维护展开状态 #

在你的组件类里，定义一个对象来存储每个人物的展开状态，用personId作为唯一标识：

// 组件类代码
personPanelStates: { [key: string]: boolean } = {};

// 处理鼠标进入事件
onMouseEnter(personId: string) {
  this.personPanelStates[personId] = true;
}

// 处理鼠标离开事件（需要添加这个来关闭面板）
onMouseLeave(personId: string) {
  this.personPanelStates[personId] = false;
}

步骤2：修改模板代码 #

把全局的isOpen替换为当前人物的状态，同时修正事件绑定和Overlay的属性：

<tr *ngFor="let person of personsFiltered | async">
  <td>
    <a 
      [routerLink]="'pDetails/' + person.personId" 
      (mouseenter)="onMouseEnter(person.personId)"
      (mouseleave)="onMouseLeave(person.personId)"
      cdkOverlayOrigin 
      #trigger="cdkOverlayOrigin"
    > 
      Details 
    </a>
  </td>
  <!-- 绑定当前人物的状态来控制Overlay显示 -->
  <ng-template 
    cdkConnectedOverlay 
    [cdkConnectedOverlayOrigin]="trigger" 
    [cdkConnectedOverlayOpen]="personPanelStates[person.personId] || false"
  >
    {{person.vorname}}
    <!-- 这里可以添加更多人物详细信息 -->
  </ng-template>
  <td></td>
</tr>

额外说明 #

• 去掉了无效的*ngIf，因为cdkConnectedOverlayOpen已经可以完全控制Overlay的显示/隐藏，不需要额外的ngIf判断。
• 添加了mouseleave事件，确保鼠标离开人物条目时面板会自动关闭，提升用户体验。
• 用personId作为状态的key，保证每个人物的状态独立，不会互相干扰。

这样修改后，当你鼠标悬停在某个人物的Details链接上时，只会显示该人物对应的OverlayPanel，其他条目不会受到影响。

内容的提问来源于stack exchange，提问作者ChopperChupss