angular - 在 ngFor 内部使用时不显示 MatTooltip

Question

我正在尝试显示一张卡片列表，这些卡片将随着另一项服务中的数据更新而动态更新。每张卡片都应该有一个工具提示，当用户将鼠标悬停在它上面时会显示该项目的名称。

原来我的代码是这样的:

<div class="bankItemsContainer" fxLayout="row" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
    <div class="bankItem" *ngFor="let item of GetBankItems()">
        <mat-card class="card-picture" matTooltip="{{item.name}}">
            <mat-card-title fxLayout.gt-xs="row" fxLayout.xs="column">
                <mat-icon svgIcon="{{item.icon}}"></mat-icon>
            </mat-card-title>
            <mat-card-footer style="text-align: center;">{{ item.quantity }}</mat-card-footer>
        </mat-card>
    </div>
</div>

问题是当我将鼠标悬停在卡片上时，工具提示没有显示。

经过一些研究，我发现调用函数不能很好地与 ngFor 一起工作，因此会导致 matTooltip 出现问题，因为项目会不断重新呈现。

然后我更改了 ngFor 以使用来自需要访问的服务的属性:

*ngFor="let item as playerService.playerSave.bank.items"

这并没有解决它。我读到使用 observable 应该会有帮助，所以我围绕服务的值(value)设置了一个 observable。

ngOnInit(): void {
    this.bankItems$ = of(this.playerService.playerSave.bank.items);
  }

并将 ngFor 更改为:

*ngFor="let item of bankItems$ | async; let i=index"

同样，当我将鼠标悬停在卡片上时，工具提示仍然没有显示。

我觉得我已经没有什么可以尝试的了，我不确定最终如何完成这项工作。

Answer 1

我有一个类似的问题，我的工具提示没有出现在 *ngFor 循环中，但事实证明我在我的模板中使用了几个函数，这导致了很多重新渲染每次我的鼠标移动。一旦我删除了功能并替换为属性，它就解决了。 This article详细解释了为什么不应在 Angular 模板表达式中使用函数调用。