角度进度条不会随着值的变化而移动答案

【问题标题】：Angular progress bar not moving with value change角度进度条不会随着值的变化而移动
【发布时间】：2021-11-28 15:41:21
【问题描述】：

我正在尝试实现一个进度条，该进度条根据我的 Angular 程序中运行的进程移动。

<div mat-dialog-content>
        <mat-progress-bar mode="determinate" [value]="loadingVal"></mat-progress-bar>

</div>

var loadingVal = 0 
var increase = 100 / array.length

for (i = 0, array.length, i++) {
    ....
    this.loadingVal = this.loadingVal + increase
}

如您所见，我在循环的每次迭代中都增加了 loadingVal。但是，进度条没有移动，它一直停留在 0 直到过程完成。我做错了什么，还是有其他方法可以移动进度条？

【问题讨论】：

这不能那样工作，因为 JavaScript 是单线程的。 Angular 将在完整函数返回之后运行其更改检测。如果您想看到一些进展，请尝试在循环中使用window.setTimeout(() => this.loadingVal += increase, 500 * i);。 setTimeout() 函数将对这些回调进行排队，Angular 可以在其间执行更改检测。顺便说一句：尝试以这种方式编写你的 for 循环：for (let i = 0; i < array.length; i++) { ... }
我的 for 循环是这样写的，我只是在快速输入时出错了哈哈。您能否在答案中告诉我您对 window.setTimeout() 的含义？
只需将this.loadingVal = this.loadingVal + increase 替换为window.setTimeout(() => this.loadingVal += increase, 500 * i);。注意：setTimeout() 的第二个参数是应该调用回调的时间（以毫秒为单位）。我这里只用它来减慢进度条动画。
我试过了，好像没有什么不同。我尝试声明一个 const 变量 loader = 20 并将其提供给 HTML，但它仍然不会显示。我认为它没有将价值从 TS 传递到 HTML ..？
你在模板中是否也引用了你的表达方式？

标签： html angular typescript angular-material progress-bar

【解决方案1】：

我觉得应该是的

[value]="loadingVal"

而不是

[value]=loadingVal

【讨论】：

不幸的是，这两种方法都不起作用

【解决方案2】：

这不能这样工作，因为 JavaScript 是单线程的。 Angular 将在完整函数返回后运行其更改检测。如果您想看到一些进展，请尝试在循环中使用window.setTimeout(() => this.loadingVal += increase, 500 * i);。 setTimeout() 函数会将这些回调排队，Angular 可以在两者之间执行更改检测。

示例

控制器：

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {

  loadingVal: number = 0;

  ngOnInit(): void {
    for (let i = 0; i < 100; i++) {
      window.setTimeout(() => (this.loadingVal += 1), i * 100);
    }
  }
}

模板：

  <mat-progress-bar mode="determinate" [value]="loadingVal"></mat-progress-bar>

工作示例：https://stackblitz.com/edit/angular-ivy-kciqoy

【讨论】：

这很有帮助，谢谢。有没有办法在一个单独的组件中使用 loadingVal 变量而不是它定义的那个？
是的，当然。例如，您可以将loadingVal 传递给某个子组件，该子组件为其定义了一个@Input()。
我问的原因是因为加载栏位于 mat-dialog 内部，它是一个单独的组件和类。我需要在该组件中定义 loadingVar，但 for 循环位于不同的组件中。他们可以在两者之间传递信息吗？
@Input() 到底在哪里使用？
我更新了工作示例并添加了另一个组件ProgressBarComponent，它采用progress 值。请看一下；）它回答了你的问题吗？