我想實作一個隨著變數增加而逐漸增加的進度條。
我已經嘗試了 3 種方法，但它們都沒有像我寫的那樣作業。
- 使用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%，如果我更改“值”，結果保持不變
- 使用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 給我指路。
這是我想要制作的進度條（使用 bootstrap 4）
在 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;
});}
我希望我幫助了別人。
uj5u.com熱心網友回復：
我能想到的最簡單的代碼
- 設定兩個div，一個為背景，一個為填充，用ngStyle設定填充div的寬度，其中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 */
}
uj5u.com熱心網友回復：
您可以使用 <progress> 標記來使用內置進度條，您可以在此處找到更多相關資訊 ：https: //developer.mozilla.org/en-US/docs/Web/HTML/Element/progress 在這里： https:// /css-tricks.com/html5-progress-element/
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/470965.html
下一篇：在Angular13中的firebase集成期間找不到名稱“PhoneOrOauthTokenResponse”