ウェブサイト検索

TypeScript - Angular Material - Mat-table 行のツールチップ


私は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 = '';
   }

回答 #1

ツールチップ内で行の属性に直接アクセスできます。特定の行データオブジェクト row にプロパティ tooltipText があるとすると、このプロパティにテンプレート内で直接アクセスできます。マウスオーバー時に現在のツールチップをコンポーネント変数に格納するために関数を実行する必要はありません。

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