添加货币管道后，CountTo Module 动画不起作用答案

【问题标题】：CountTo Module animation doesn't work after currency pipe is added添加货币管道后，CountTo Module 动画不起作用
【发布时间】：2020-05-09 10:53:29
【问题描述】：

我需要有这样的最终视图：

这些值将具有从 0 到指定的最终值的计数器动画。我在千位分隔符的值部分介绍了货币管道。但在那之后计数器动画停止了。它在下面的屏幕截图中显示 NaN，然后出现指定的值。我想让计数器动画与货币管道一起工作。

dashboard.component.html

<div class="media-body col-8">
  <span class="m-0">Ad Offers / Value</span>
  <h3 class="mb-0">
    <span class="counter" [CountTo]="adOffersCount" [from]="0" [duration]="2">{{ adOffersCount }}
                                </span> /

    <span class="counter" [CountTo]="adOffersValue | currency:'INR':'symbol':'3.0'" [from]="0" [duration]="2">{{ adOffersValue }}
                                </span>

    <small> This Month</small>
  </h3>
</div>

dashboard.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  adOffersCount= 10;  
  adOffersValue =6650;
  ngOnInit(){

  }
}

【问题讨论】：

标签： html angular typescript pipe angular8

【解决方案1】：

好吧，如果您查看货币管道的第一行 => https://angular.io/api/common/CurrencyPipe 它会告诉您它将数字转换为货币字符串，根据确定组大小和分隔符的区域设置规则进行格式化.现在您正在为您的 Count 分配一个特定的字符串而不是一个数字。以及为什么要在那里放置一个货币管道。它需要在外插括号内。

    <span class="counter" [CountTo]="adOffersValue" [from]="0" [duration]="2">{{ adOffersValue | currency:'INR':'symbol':'3.0'}}

demo

【讨论】：

我将货币管道放在那里，因为动画仅因计数值而起作用。即使您删除了插值，它仍然可以工作。根据您的回答，它看起来像这样。 drive.google.com/file/d/1GMbmQxp9uxPBvsnqYgLiONm5w-O2XN9e/…
我没有为计数器分配字符串。正如您在我上面附加的打字稿代码中看到的那样，它是“数字”数据类型。
您正在分配一个数字，但货币管道正在将此数字转换为字符串。因此，分配给您的“CountTo”属性的最终值是一个字符串......
好的！但现在呢？根据您的代码，该数字没有任何千位分隔符或任何其他货币分隔符。
你做错了，这不在此代码 sn-p 中。查看演示。