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>
