为 Overlay 从 ngFor 中排除一个元素

Question

目前我的 OverlayPanel 有问题。我正在尝试制作一个覆盖面板，其中包含有关我当前悬停的人的具体细节。问题是我用 ngFor 创建了整个 table 个用户，所以覆盖面板显示的是每个人，而不是我想要的单个用户。

我已经尝试过 ngIf 但我没有用

<tr *ngFor="let person of personsFiltered | async">
                <td> <a [routerLink]='"pDetails/" + person.personId' (mouseenter)="isOpen = !isOpen" cdkOverlayOrigin #trigger="cdkOverlayOrigin"> Details </a> </td>   
                 //the overlay which should open one time
                 // and the wrong ngIf statement
                 // person.personId gets the single person
                <ng-template *ngIf="personsFiltered != person" cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="isOpen" >
                    {{person.vorname}}
                </ng-template>
                <td> </td>

Answer 1

你的if条件好像不对，不应该是这样的吗：

<tr *ngFor="let person of personsFiltered | async">
            <td> 
                 <a [routerLink]='"pDetails/" + person.personId' (mouseenter)="isOpen = !isOpen" cdkOverlayOrigin #trigger="cdkOverlayOrigin"> Details </a> 
            </td>   

            <ng-template *ngIf="person.vorname != 'NAME OF PERSON YOU WISH TO EXCLUDE'" cdkConnectedOverlay [cdkConnectedOverlayOrigin]="trigger" [cdkConnectedOverlayOpen]="isOpen" >
                {{person.vorname}}
            </ng-template>
</tr>

Answer 2

显示所有名称是因为您使用单个布尔变量来决定何时显示所有名称。我会保留您当前悬停的人的 id，只显示：

在您的 .ts 文件中：

public hoveredPersonId: number | null;

并在您的模板文件中：

<tr *ngFor="let person of personsFiltered | async">
  <td>
    <a
      [routerLink]="'pDetails/' + person.personId"
      (mouseenter)="hoveredPersonId = person.personId"
      (mouseleave)="hoveredPersonId = null"
      cdkOverlayOrigin
      #trigger="cdkOverlayOrigin">
      Details
    </a>
  </td>

  <ng-template
    *ngIf="person.personId === hoveredPersonId"
    cdkConnectedOverlay
    [cdkConnectedOverlayOrigin]="trigger"
    cdkConnectedOverlayOpen>
    {{ person.vorname }}
  </ng-template>
</tr>

为 Overlay 从 ngFor 中排除一个元素

Excluding a element from ngFor for the Overlay

angular

ngfor