Angular8中如何实现一个简单的进度条？

Question

我想实现一个随着变量的增加而逐渐增加的进度条。

我已经尝试了 3 种方法，none 其中的方法和我写的一样有效。

使用CSS

.base{
    height: 10px;
    width: 100%;
    background: #ddd;
}

.pBar{
    height: 10px;
    background: #009200;
}

在 component.html 时：

<div class="base">
    <div class="pBar" [ngStyle]="{'width.%':value}"></div>
</div>

其中 'value' 是在 component.ts 中声明的数值，并在 ngOnInit()

中初始化为 10

结果：进度条在 100%，如果我更改 'value' 结果保持不变

使用 Material v13.3.6 库

正在导入库并将其插入到 module.ts 导入中然后将其插入 component.html:

<mat-progress-bar mode="determinate" value="40" color="warn"></mat-progress-bar>

结果：从屏幕中间开始一直到右端的黑条；更改值，即使是手动更改，也没有任何变化。

使用 Bootstrap v4 库

我从终端导入库并在html组件中使用：

<div class="progress">
  <div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>

通过在带有 setInterval 的 js 脚本下方插入以逐步更改 aria-valuenow 和宽度的值：

结果：一个固定的 100% 的条，但是手动改变宽度条的值当然改变了大小

我是不是做错了什么？我怎样才能实现我的目标？谢谢

解决方法:

感谢 Sebastien Servouze 为我指路。

这是我想做的进度条（使用bootstrap4）

在component.html:

<div class="progress">
      <div class="progress-bar progress-bar-striped progress-bar-animated bg-danger" role="progressbar" [ngStyle]="{'width.%': progress * 100}" [attr.aria-valuenow]="progress" aria-valuemin="0" aria-valuemax="100"></div>
    </div>

在component.ts:

import { timer } from 'rxjs';

progress!:number;
ngOnInit(): void {
this.progress = 0;
this.start(); }

start(){
    timer(0, 50).subscribe(()=>{
      while (this.progress < 1)
        this.progress+=0,01;
    });}

我希望我帮助了别人。

Answer 1

我能想到的最简单的代码

设置两个div，一个用于背景，一个用于填充，设置填充的宽度div用ngStyle，其中progress是一个0到1之间的数字

<div class="progress-bar">
  <div class="progress-bar-fill" [ngStyle]="{'width.%': progress * 100}"></div>
</div>

设置进度条的宽度和高度，以便您可以使用 % 作为宽度。还要设置填充高度 div

.progress-bar {
  width: 200px;
  height: 25px;
  background-color: #222;
}

.progress-bar-fill {
  background-color: #5F5;
  height: 100%; /* This is important */
}

Answer 2

您可以使用标签来使用内置进度条，您可以在此处找到更多相关信息： https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress 和这里： https://css-tricks.com/html5-progress-element/

Angular8中如何实现一个简单的进度条？

How do you implement a simple progress bar in Angular 8?

css

typescript

angular-material

bootstrap-4

angular