html - 避免在 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 内置了一些管道，其中之一可以将您的数字转换为适当的货币格式。只需添加以下内容:

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

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