Анимация модуля CountTo не работает после добавления валютной трубы - PullRequest
Новая
       4

Анимация модуля CountTo не работает после добавления валютной трубы

0 голосов
/ 23 января 2020

Мне нужно иметь окончательный вид, подобный этому:

enter image description here

У значений будет анимация счетчика от 0 до указанного окончательного значения. И я ввел валютный конвейер в разделе значений для разделителя тысяч. Но после этого счетчик анимации остановился. Он показывает NaN, как на скриншоте ниже, а затем появляется указанное значение. Я хочу, чтобы анимация счетчика работала вместе с конвейером валют.

enter image description here

enter image description here

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(){

  }
}

1 Ответ

0 голосов
/ 23 января 2020

Хорошо, если вы посмотрите на первую строку того, что делает валютная труба => https://angular.io/api/common/CurrencyPipe, она скажет вам, что она преобразовывает число в строку валюты, отформатированную в соответствии с правилами локали которые определяют размер группы и разделитель. И теперь вы назначаете указанную c строку вашему счетчику вместо числа. И почему вы хотите поставить там валютную трубу. Он должен быть внутри скобок экстраполяции. 

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

демо

...