角度-角度材料进度条的倒数不一致

Question

我有一个倒数计时器：

interval;
timeJump: number = 10;
timeLength: number = 5;
timerLeft: number = this.timeLength;

startTimer() {
    this.interval = setInterval(() => {
      if (this.timerLeft - this.timeJump / 1000 <= 0) {
        this.timerLeft = 0;
        clearInterval(this.interval);
        return;
        setTimeout(() => this.finishedTimer(), 500);
      } else {
        this.timerLeft -= this.timeJump / 1000;

      }
    }, this.timeJump);
}

我正在ngOnInit（）中调用startTimer（）函数，并且它正在运行。

在html模板中，我有一个进度栏：

<div class="progress-wrapper" style="height: 4%;">
      <mat-progress-bar id="timer" mode="determinate" value="{{(timerLeft/timeLength) * 100}}"
                        style="height: 100%;"></mat-progress-bar>
</div>

当计时器到达末尾时（大约最后10％），它的价值下降速度比其应有的快得多。

您能帮我解决这个问题吗？

谢谢

Answer 1

这是问题吗？对我来说完美！ （除了struct MainView: View { @State var userSettings = UserSettings() var body: some View { SettingsMain(userSettings: userSettings) } } 之后的def rf(p1, p2, p3): p4=p3 p3=p2 p2=p4 def ro(p1, p2, p3): p4=p1 p1=p2 p2=p3 p3=p4 print(p4) def buttons(p1, p2, p3): l=tk.Button(top, text="Rotate", command=ro(p1, p2, p3)) k=tk.Button(top, text="Reflect", command=rf(p1, p2, p3)) triangle(p1, p2, p3) text(p1, p2) k.pack() l.pack() buttons(p1, p2, p3) top.mainloop() 不会被使用）

但是，您可以为此使用RxJ！

HTML

setTimeout(() => this.finishedTimer(), 500);

TS

return;

然后调用带有进度条超时的startTime方法。

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

参考：https://stackblitz.com/edit/angular-material-progress-bar-decrease

Answer 2

我修复了！ 问题是我使用的时间间隔太短。进度栏跟不上速度。将间隔设置为任意值，但始终将在进度条的值中输入的值四舍五入为整数，如下所示：

 timeLeft | number : '1.0-0'