MatTooltip 在 ngFor 中使用时不显示答案

【问题标题】：MatTooltip does not display when used inside ngForMatTooltip 在 ngFor 中使用时不显示
【发布时间】：2020-12-03 12:43:40
【问题描述】：

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

原来我的代码如下：

<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"

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

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

【问题讨论】：

标签： angular angular-material ngfor

【解决方案1】：

我尝试了您的代码来复制您的问题。问题是您错过了工具提示的 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>

希望这能解决您的问题。

【讨论】：

【解决方案2】：

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

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

【讨论】：

是的 MatTooltipModule 被导入到组件的模块中。

【解决方案3】：

我遇到了类似的问题，我的工具提示没有显示在 *ngFor 循环中，但结果证明我在模板中使用了多个函数，这导致每次鼠标移动时都会重新渲染。一旦我删除了函数并用属性替换，它就解决了。 This article 解释了为什么不应该在 Angular 模板表达式中使用函数调用的更多细节。

【讨论】：