文章内容
2024/9/5 19:51:21,作 者: 黄兵
Angular 截取字符串
这是一个 Angular 截取字符串长度的示例代码：
<ng-container matColumnDef="title">
<th mat-header-cell *matHeaderCellDef>标题</th>
<td mat-cell *matCellDef="let element">
<span [matTooltip]="element.title.length > 10 ? element.title : ''" matTooltipPosition="above">
<!-- 截取 title 字符串 -->
{{element.title.length > 10 ? (element.title | slice:0:10) + '...' : element.title}}
</span>
</td>
</ng-container>
以上代码说明：
matTooltip：添加了matTooltip指令来显示完整标题，并绑定到element.title。matTooltipPosition="above"表示提示框出现在上方，可以根据需要调整位置。slice管道：在模板中使用 Angular 的slice管道对字符串进行截取。例如，(element.title | slice:0:10)会截取标题的前 10 个字符。- 三元表达式：使用三元表达式来判断
element.title的长度，如果长度超过 10，显示截断后的字符串，并加上省略号。
其它相关说明：
- 条件绑定
matTooltip：我们使用了[matTooltip]的属性绑定。如果element.title的长度大于 10，则显示完整的element.title作为 tooltip，否则传入空字符串''，这将禁用 tooltip。 - 保持文本显示逻辑：如果
element.title的长度大于 10，截断显示前 10 个字符加上省略号；否则直接显示完整标题。
这样，只有在 element.title 的长度大于 10 时，鼠标悬停时才会显示 matTooltip。
这样就完成了在 Angular 中字符截断的操作。
评论列表