Ionic 4中的动态进度条？答案

【问题标题】：Dynamic progress bar in Ionic 4?Ionic 4中的动态进度条？
【发布时间】：2019-11-21 02:16:25
【问题描述】：

所以我正在尝试构建一个进度条，每次用户按下按钮时，进度条都会增加 +1%。

html

<ion-button *ngFor="let progress of progress" (click)="add(progress)">Progress</ion-button>
<ion-progress-bar value={{progress}} buffer={{buffer}}></ion-progress-bar>

组件文件

add(progress){
    this.progress = progress + 1;

  }

由于某种原因，按钮没有显示，但 Logcat 没有显示错误。我做错了吗？

【问题讨论】：

标签： angular typescript ionic-framework progress-bar

【解决方案1】：

试试

public progress = 1;
public increaseProgress(){
  this.progress = this.progress + 1; 
}

<ion-button (click)="increaseProgress()">Progress</ion-button>
<ion-progress-bar value={{progress}}></ion-progress-bar>

【讨论】：

谢谢，它成功了。我怎样才能只允许整数？比如，如果我的进度条每次点击增加 1.56%，我怎么能只显示整数？
你应该用这个代替{{}}:<ion-progress-bar [value]="progress"></ion-progress-bar>
另外，你需要总数：<ion-progress-bar [value]="progress/total" [buffer]="buffer/total"></ion-progress-bar>

【解决方案2】：

您可以按照这种方式进行操作，效果很好

import { NgZone } from '@angular/core';

constructor(public _zone: NgZone) { }

const fileTransfer: FileTransferObject = this.transfer.create();

fileTransfer.onProgress((progressEvent) => {
   this._zone.run(() => {
      this.progress = (progressEvent.lengthComputable) ?  
      Math.floor(progressEvent.loaded / progressEvent.total * 100) : -1;
   });
 });



 <div class="progress-outer" >
    <progress id="progressbar" max="100" [value]="progress"> </progress>
 </div>

【讨论】：