matTooltip在*ngFor渲染的表格TR>TD内显示位置错误如何解决？

数据老陈

2026-10-18

解决思路

修正基础绑定错误
现有代码中matTooltip的绑定逻辑错误，matTooltip="'dayVal?.description'"会直接输出固定字符串作为提示内容，没有读取变量实际值，需改为属性绑定写法：[matTooltip]="dayVal?.description"。
修正trackBy的错误用法
trackBy是ngFor指令的专属配置项，当前写在ngIf上完全不生效。缺少有效trackBy的情况下，Angular在数据更新时会销毁重建整个循环内的DOM节点，导致matTooltip计算触发元素坐标时获取到错误值，是偏移问题的核心诱因。修改方式：
1. 内层dayVal循环补充trackBy配置：*ngFor="let dayVal of row.value; let i = index; trackBy: trackByFn"
2. 外层row的循环也建议补充对应的trackBy逻辑，避免整行DOM重绘：*ngFor="let row of timesheetMatrix | keyvalue; trackBy: trackByRowFn"
修复定位相关CSS问题
Angular Material的tooltip依赖触发元素的getBoundingClientRect()返回值计算位置，如果td、包裹mat-icon的父span存在transform、position: fixed这类改变元素坐标系的CSS属性，会直接导致坐标计算偏移。可排查对应元素样式，也可主动给触发tooltip的mat-icon增加相对定位样式：
```
.hasDescription {
  position: relative;
}
```
手动指定tooltip展示方向
可直接给mat-icon增加方向参数固定tooltip弹出位置，避免自动计算偏差：
```
<mat-icon 
  class="hasDescription" 
  [matTooltip]="dayVal?.description"
  matTooltipPosition="above"
  #tooltip="matTooltip"
>info</mat-icon>
```
可选方向值包括above/below/left/right，按需选择即可。
简化DOM结构
可以直接用[matTooltipDisabled]="!dayVal?.description"控制tooltip是否启用，不需要额外用ng-container和ngIf包裹，减少嵌套层级也能降低坐标计算异常的概率。