如何在 Angular5/Ionic4 中手动控制@ngx-progressbar/core 进度条的进度答案

【问题标题】：How can I manually control the progress of the @ngx-progressbar/core progress bar in Angular5/Ionic4如何在 Angular5/Ionic4 中手动控制@ngx-progressbar/core 进度条的进度
【发布时间】：2018-07-28 00:10:27
【问题描述】：

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

这是我现在尝试使用 Ionic 的方法，但这并不重要，因为它基本上只是 Angular。我正在使用 4.3 版的 @ngx-progressbar/core 以及 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() 进度条，它会立即填满。

【问题讨论】：

标签： angular ionic-framework progress-bar

【解决方案1】：

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

progress = 0;

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

【讨论】：

.inc(x) 应该做同样的事情吗？它应该将进度条增加 x 数量，而 .set(x) 应该直接将其设置为 x。但至少 .inc(x) 让它继续递增。还是我误解了 .inc() 的含义？
是的 .inc(x) 继续我以 x 递增。我以为你不想那样。
都不工作。当我调用 .inc() 时，进度条一直完成，它不仅增加了 5%。我只是放弃了它并制作了自己的角度/离子组件。