Angular中matTooltip未获取函数原始返回值问题咨询

原因分析 #

你遇到的问题核心是matTooltip绑定的是经过slice截取后的值，而非getFieldName(element)的原始返回值。从你给出的代码片段推测，你在设置tooltip内容时，错误地复用了和label显示文本一样的截取表达式，导致hover时只能看到截取值。

修正方案 #

直接将matTooltip绑定到getFieldName(element)的原始返回值，同时保持label内的文本为截取后的结果即可。以下是修正后的完整代码示例：

<!-- 字段长度超过39时，显示截取值，hover显示原始完整值 -->
<label class="icon-label" 
       *ngIf="getFieldName(element).length > 39"
       [matTooltip]="getFieldName(element)">
  {{ getFieldName(element).slice(0, 36) }}...
</label>

<!-- 字段长度小于等于39时，显示完整值（可按需决定是否保留tooltip） -->
<label class="icon-label" 
       *ngIf="getFieldName(element).length <= 39">
  {{ getFieldName(element) }}
</label>

说明 #

• [matTooltip]="getFieldName(element)" 直接绑定原始返回值，确保hover时显示完整内容
• label内的{{ getFieldName(element).slice(0, 36) }}... 负责显示截取后的短文本
• 短文本场景下如果不需要tooltip，直接去掉对应的[matTooltip]属性即可

内容的提问来源于stack exchange，提问作者Dinesh B