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

Question

我是 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,

    },

我想在没有按钮或没有点击事件的情况下增加数字

Answer 1

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

成功事实.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>

成功事实.component.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);
  }
}

Answer 2

在您的 Angular 组件中，您可以使用 clearInterval() 函数来停止 setInterval() 计时器。但是，您需要将 setInterval() 函数的返回值存储在一个变量中，以便稍后可以将其作为参数传递给 clearInterval() 函数以停止计时器。

这里是您的代码的更新版本，演示了如何在 Angular 的对象数组中使用 setInterval() 和 clearInterval()：

    import {Component, OnDestroy} from '@angular/core';
    
           
@Component({
  selector: 'app-success-facts',
  templateUrl: './success-facts.component.html',
  styleUrls: ['./success-facts.component.css']
})

export class SuccessFactsComponent implements OnDestroy {
  startValue: number = 0;
  successCounterData: any[] = [
    {
      id: 0,
      countNumber: 0,
      text: 'Project Complete',
      isRate: false,
      intervalId: null // variable to store intervalId
    },
    {
      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
    }
  ];

  constructor() {
    // Start the interval timer for countNumber with an interval of 10ms
    this.successCounterData[0].intervalId = setInterval(() => {
      this.successCounterData[0].countNumber++;
      if (this.successCounterData[0].countNumber === 2) {
        this.stopCounter(0); // Stop the counter when countNumber reaches 2
      }
    }, 10);
  }

  stopCounter(index: number): void {
    clearInterval(this.successCounterData[index].intervalId); // Stop the interval timer
    this.successCounterData[index].intervalId = null; // Reset the intervalId variable
  }

  ngOnDestroy(): void {
    // Clear all interval timers when the component is destroyed
    this.successCounterData.forEach((counter) => {
      if (counter.intervalId) {
        clearInterval(counter.intervalId);
      }
    });
  }
}

在上面的代码中，我们将setInterval()的返回值存储在successCounterData数组中对象的intervalId属性中。然后我们可以将此 intervalId 作为参数传递给 clearInterval() 以停止相应的间隔计时器。 stopCounter() 函数以一个索引作为参数，它表示要停止计数器的对象在数组中的索引。 ngOnDestroy() 生命周期钩子用于在组件销毁时清除所有间隔计时器以防止内存泄漏。