Angular Material - 垫表行工具提示答案

【问题标题】：Angular Material - Mat-table row tooltipAngular Material - 垫表行工具提示
【发布时间】：2020-07-14 09:35:19
【问题描述】：

我正在使用 Angular Material Mat-Table，我想在鼠标悬停期间在任何行上显示工具提示。基于 row id ，我需要匹配和过滤来自 mGridDataSource 的数据。我是 Angular 的新手。有人可以帮我解决这个问题吗？

HTML 文件：

<mat-row *matRowDef="let row; columns: mGridColumns;"
     [ngClass]="{hovered: row.hovered, highlighted: row.highlighted}"
     (click)="onRowClick(mGridDataSource, row)"
     matTooltip = {{myToolTip}} (mouseover)="getToolTip(row); ">
</mat-row>

ts 文件：

getToolTip(row) {

this.matTooltip = '';
   }

【问题讨论】：

目前的行为是什么？根本没有提示，错误，提示没有数据？
@FelixLemke - 如果我将任何文本分配给 this.matTooltip，工具提示会显示数据，但正如我所提到的，我需要来自与行 ID 匹配的数据源的特定行数据。

标签： angular typescript angular-material

【解决方案1】：

您可以直接在工具提示中访问行属性。假设您在特定的行数据对象row 中有属性tooltipText，那么您可以直接在模板中访问该属性。无需在鼠标悬停时执行函数即可将当前工具提示存储在组件变量中。

<mat-row
  *matRowDef="let row; columns: mGridColumns;"
  (click)="onRowClick(mGridDataSource, row)"
  [matTooltip]="row.tooltipText">
</mat-row>

【讨论】：