时间戳

首页 > 解决方案 > 避免在 html 卡片中显示大数字

html - 避免在 html 卡片中显示大数字

问题描述

我在此处输入图像描述这里有这张卡，我在里面显示动态数据。如您所见，数字太大，所以我希望数字像这样显示0.600000+，然后如果我将鼠标悬停在它上面，那么工具提示会显示完整的数字。我怎样才能做到这一点？

这是这张卡的html代码

<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">               
 <div class="info-box bg-teal hover-expand-effect">
  <div class="icon">
   <a [routerLink]="['/app/home']">
    <i class="material-icons">attach_money</i>
   </a>
  </div>
  <div class="content">
   <div class="text" (mouseenter) ="mouseEnter() " >Upcoming Bill</div>
    <div class="number">${{upcomingEstimatedBill}}</div>
   </div>
  </div>
 </div>

标签： htmlangulartypescript

解决方案

Angular 在 Pipes 中有一些构建，其中之一将您的数字转换为适当的货币格式。只需添加以下内容：

...
<div class="number">{{upcomingEstimatedBill | currency: 'USD'}}</div>
...

或者，很容易构建自己的管道来以任何你想要的方式转换数字。

推荐阅读