角材料 - 墊表行工具提示

Question

我正在使用 Angular Material Mat-Table，我想在鼠標懸停在任何行上時顯示一個工具提示。 基於行 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 = '';
   }

Answer 1

您可以直接在工具提示中訪問行屬性。 想象一下，您的特定行數據對象row有屬性tooltipText ，然后您可以直接在模板中訪問此屬性。 無需在鼠標懸停時執行函數來將當前工具提示存儲在組件變量中。

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