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

Question

我希望每秒都为进度条的值添加一些值，这样当进度条为100时，我就可以执行一些操作。我已经写了下面的代码，但它什么也做不了。

Ts文件：

export class ProgressSpinnerTest implements OnInit {

  color: ThemePalette = 'primary';
  mode: ProgressSpinnerMode = 'determinate';
  value = 0;
  sub: Subscription;

  ngOnInit(): void {
    this.sub = interval(1000).subscribe(x => {
    this.progressBar();
});
}

progressBar(): void {
  this.value + 10;
  if (this.value === 100) {
    console.log("done");
    this.value = 0;
  }
}
}

组件：

<mat-card>
  <mat-card-content>
    <h2 class="example-h2">Result</h2>

    <mat-progress-bar
        class="example-margin"
        [color]="color"
        [mode]="mode"
        [value]="value">
    </mat-progress-bar>
  </mat-card-content>
</mat-card>

如何才能使它每秒增加10个进度条的值呢？

Answer 1

您还可以使用rxjs运算符执行此操作：

  color: ThemePalette = 'primary';
  mode: ProgressSpinnerMode = 'determinate';
  progress: Observable<number>;
  ngOnInit(): void {
    this.progress = interval(1000).pipe(
      mapTo(10),
      scan((a, b) => a + b),
      takeWhile((value) => value < 100, true),
      map((value) => (value == 100 ? 0 : value))
    );
    this.progress.pipe(takeLast(1)).subscribe((_) => console.log('done'));
  }

和html：

<mat-progress-bar 
  [color]="color"
  [mode]="mode"
  [value]="progress | async">
</mat-progress-bar>

一个不错的做法是尽量避免在组件中使用订阅，让angular使用异步管道处理订阅。