每秒添加材料进度条的值Angular10

<div class="progress-bar" [style.width.%]="progressValue"></div>

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

@Component({
  selector: 'app-progress',
  templateUrl: './progress.component.html',
  styleUrls: ['./progress.component.css']
})
export class ProgressComponent {
  progressValue: number = 0;

  updateProgress(value: number) {
    this.progressValue = value;
  }
}

import { Component, OnInit } from '@angular/core';
import { ProgressComponent } from './progress.component';

@Component({
  selector: 'app-material',
  templateUrl: './material.component.html',
  styleUrls: ['./material.component.css']
})
export class MaterialComponent implements OnInit {
  progressComponent: ProgressComponent;

  constructor() { }

  ngOnInit() {
    // 初始化进度条组件
    this.progressComponent = new ProgressComponent();
  }

  addMaterial() {
    // 模拟每秒添加材料的过程
    let progress = 0;
    const interval = setInterval(() => {
      progress += 10;
      this.progressComponent.updateProgress(progress);

      if (progress >= 100) {
        clearInterval(interval);
      }
    }, 1000);
  }
}