Question

因此，我正在尝试构建一个进度条，以使每次用户按下按钮时进度条都会增加+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没有显示错误。我在做错什么吗？

Answer 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>

Answer 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>

Ionic 4中的动态进度栏？

2 个答案: