从 ngFor 中为 Overlay 排除一个元素答案

【问题标题】：Excluding a element from ngFor for the Overlay从 ngFor 中为 Overlay 排除一个元素
【发布时间】：2021-09-09 06:36:56
【问题描述】：

目前我的 OverlayPanel 有问题。我试图制作一个覆盖面板，其中包含有关我当前悬停的人的特定详细信息。问题是我用 ngFor 创建了整个用户表，所以覆盖面板显示的是每个人，而不是我想要的一个人。

我已经尝试过 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>

【问题讨论】：

标签： angular ngfor

【解决方案1】：

显示所有名称是因为您使用单个布尔变量来决定何时显示所有名称。我会保留您当前悬停的人的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>

【讨论】：

【解决方案2】：

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

【讨论】：

我已经尝试过这样的“person.personId！= peopleFiltered.personId”，但结果相同。 person 是单身人士，personsFiltered 是所有人
你还是错了，如果你在循环personsFiltered那你怎么能和personsFiltered.personId比较。它应该是一个特定的值。