Question

我正在尝试在我的应用程序中获取进度栏。我发现@ ngx-progressbar / core看起来很有希望。但是由于某种原因，我无法控制它的进度。无论我做什么，只要进度增加了一些，它就会一路突飞猛进，没有任何控制。我希望从可观察的角度逐步增加它。

这是我现在尝试使用Ionic进行的操作，但这并不重要，因为它基本上只是Angular。我正在使用@ ngx-progressbar / core的4.3版本以及Angular 5和Ionic 4。

组件：

import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NgProgressComponent } from '@ngx-progressbar/core';

@IonicPage()
@Component({
  selector: 'page-test',
  templateUrl: 'test.html',
})
export class TestPage implements AfterViewInit{
  @ViewChild(NgProgressComponent) progress: NgProgressComponent;


  constructor(
    public navCtrl: NavController,
    public navParams: NavParams
  ) { }

  ngAfterViewInit() {
    console.log("Starting progress");
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad TestPage');
  }

模板：

<ion-content>
  <ng-progress></ng-progress>
  <button ion-button color="primary" outline round (click)="this.progress.inc(5);">Inc</button>
</ion-content>

我希望每次单击都会使进度条增加5％，但是，一旦单击它，无论progress.inc（）的参数是什么，它就会开始填充整个进度条。如果我使用.start（）进度栏，它会立即填满。

Answer 1

使用set方法进行手动控制：

progress = 0;

setProgress(){
    this.progress.set(this.progress += 5);
}

如何在Angular5 / Ionic4

1 个答案: