在 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 应该会有帮助，所以我围绕服务的值设置了一个 observable。

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

并将 ngFor 更改为：

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

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

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

Answer 1

您是否将 MatTooltipModule 导入到声明该组件的模块中？

您的标记在此示例中有效：https://stackblitz.com/edit/kbs-so-mattooltip?file=src%2Fapp%2Fcard-overview-example.html

Answer 2

我试过你的代码来重现你的问题。问题是您错过了工具提示的 id 属性。

我按照下面的方法试过了。

<div class="bankItemsContainer" fxLayout="row" fxLayoutWrap fxLayoutGap="0.5%" fxLayoutAlign="center">
    <div class="bankItem" *ngFor="let item of GetBankItems()">
        <mat-card class="card-picture" #tooltip="matTooltip"
        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>

希望这能解决您的问题。

Answer 3

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

在 ngFor 内部使用时不显示 MatTooltip

MatTooltip does not display when used inside ngFor

angular

angular-material

ngfor