避免在html卡内显示大数字

Question

我在这里有张卡片，并且正在其中显示动态数据。如您所见，这个数字太大了，所以我希望数字显示为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>

Answer 1

Angular在Pipes中有一些内置功能，其中之一将您的数字转换为正确的货币格式。只需添加以下内容：

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

或者，很容易构建自己的管道以任意方式转换数字。