时间戳

首页 > 解决方案 > Angular Material - 垫表行工具提示

angular - Angular Material - 垫表行工具提示

问题描述

我正在使用 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 = '';
   }

标签： angulartypescriptangular-material

解决方案

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

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

推荐阅读