在ngFor内部使用时，MatTooltip不显示

问题描述

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

最初，我的代码如下：

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

这没有解决。我读到，使用可观察对象应该会有所帮助，因此我围绕服务的值设置了一个可观察对象。

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

并将ngFor更改为：

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

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

我觉得我已经没有足够的尝试机会了，我不确定如何最终完成这项工作。

解决方法

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

我希望这能解决您的问题。

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

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

angular angular-material