typescript 如何在Angular中使用setInterval作为计数器？

wmomyfyw 于 2023-04-13 发布在 TypeScript

关注(0)|答案(1)|浏览(146)

我是Angular的新手，我想使用setInterval函数来计数，但是我不能成功。有人能帮我吗？（我很抱歉我的英语水平很差。）提前感谢。
这里是我的success-facts.component.ts

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

@Component({
  selector: 'app-success-facts',
  templateUrl: './success-facts.component.html',
  styleUrls: ['./success-facts.component.css']
})

export class SuccessFactsComponent {
  startValue: number = 0;
  countNumber: any = setInterval(() => {});
  projectCountStop: any = setInterval( () => {
    this.countNumber++;
    if(this.countNumber === 20 ) {
      clearInterval(this.projectCountStop)
    }
  }, 10 )

  public successCounterData: any[] = [
    {
      id: 0,
      countNumber: setInterval(() => {
        this.startValue++;
        if(this.startValue == 2) { 
          clearInterval() // I don't know what should I use for parameter here, I should use "countNumber" but I can't use
        }
      },10),
      text: 'Project Complete',
      isRate: false,

    },
    {
      id: 1,
      countNumber: 5000,
      text: 'Happy Clients',
      isRate: false,
    },
    {
      id: 2,
      countNumber: 25,
      text: 'Years Experience',
      isRate: false
    },
    {
      id: 3,
      countNumber: 90,
      text: 'Success Rate',
      isRate: true
    },
    {
      id: 4,
      countNumber: 35,
      text: 'Expert Advisors',
      isRate: false
    }
  ]
}

这里是我的success-facts.component.html

<div *ngFor="let count of successCounterData" class="count-column">
  <div class="inner-box count-box">
    <div class="count-outer">
      <span *ngIf="count.isRate; else elseBlock" class="count-text">{{ count.countNumber }}%</span>
      <ng-template #elseBlock>{{startValue}}</ng-template>
    </div>
    <h4 class="counter-title">{{ count.text }}</h4>
  </div>
</div>

我尝试使用setInterval函数与clearInternal函数，但我不知道如何在数组中使用它，至少我不知道我应该在clearInterval函数中写什么参数

{
  id: 0,
  countNumber: setInterval(() => {
    this.startValue++;
    if(this.startValue == 2) { 
      clearInterval()
    }
  },10),
  text: 'Project Complete',
  isRate: false,
},

我想增加没有按钮或没有点击事件的数量

typescript

来源：https://stackoverflow.com/questions/75965420/how-can-i-use-setinterval-for-counter-in-angular

1条答案

按热度按时间

kpbwa7wx1#

我用OnInit解决了这个问题，如果有人有同样的问题，这里是解决方案;

success-facts.component.html

<div *ngFor="let count of successCounterData" class="count-column">
  <div class="inner-box count-box">
    <div class="count-outer">
      <span *ngIf="count.isRate; else elseBlock" class="count-text">{{ count.count }}%</span>
      <ng-template #elseBlock>
        {{count.count}}
      </ng-template>
    </div>
    <h4 class="counter-title">{{ count.text }}</h4>
  </div>
</div>

成功-事实.组件.ts

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

@Component({
  selector: 'app-success-facts',
  templateUrl: './success-facts.component.html',
  styleUrls: ['./success-facts.component.css']
})

export class SuccessFactsComponent implements OnInit {
  countNum: number = 0;
  targetCount: number = 100;
  interval: any;

  public successCounterData: any[] = [
    {
      id: 0,
      countNumber: 20000,
      count: 0,
      text: 'Project Complete',
      isRate: false,

    },
    {
      id: 1,
      countNumber: 5000,
      count: 0,
      text: 'Happy Clients',
      isRate: false,
    },
    {
      id: 2,
      countNumber: 25,
      count: 0,
      text: 'Years Experience',
      isRate: false
    },
    {
      id: 3,
      countNumber: 90,
      count: 0,
      text: 'Success Rate',
      isRate: true
    },
    {
      id: 4,
      countNumber: 35,
      count: 0,
      text: 'Expert Advisors',
      isRate: false
    }
  ]

  ngOnInit(): void {
    this.startCounting();
  }

  startCounting() {
    const interval = setInterval(() => {
      let allItemsFinished = true;
      this.successCounterData.forEach((item) => {
        if (item.count < item.countNumber) {
          item.count++;
          allItemsFinished = false;
        }
      });
      if (allItemsFinished) {
        clearInterval(interval);
      }
    }, 1);
  }
}

赞(0）回复(0）举报 2023-04-13

我来回答

typescript 如何在Angular中使用setInterval作为计数器？

1条答案

相关问题

热门标签

最新问答