angular - 当我在 http 请求中使用时，ngx-progressbar 无法运行 bar

Question

我尝试了演示代码“ https://stackblitz.com/edit/ngx-progressbar?file=src%2Fapp%2Fapp.component.ts ”。在这个网站上是成功的。

然后我把这个演示代码带到我的项目中。为什么我在使用 http 请求时看不到进度条？

<ng-progress #progressBar (started)="onStarted()" (completed)="onCompleted()" 
    [color]="options.color" 
    [speed]="options.speed" 
    [spinner]="options.spinner" 
    [spinnerPosition]="options.spinnerPosition" 
    [trickleSpeed]="options.trickleSpeed" 
    [ease]="options.ease">
</ng-progress>

<button (click)="testHttp()">hihihihi
</button>

import { NgProgress } from '@ngx-progressbar/core';

startedClass = false;
completedClass = false;

options = {
            minimum: 0.08,
            maximum: 1,
            ease: 'linear',
            speed: 200,
            trickleSpeed: 300,
            meteor: true,
            spinner: true,
            spinnerPosition: 'right',
            direction: 'leftToRightIncreased',
            color: 'red',
            thick: true
          };
        onStarted() {
            this.startedClass = true;
            setTimeout(() => {
              this.startedClass = false;
            }, 800);
        }

        onCompleted() {
            this.completedClass = true;
            setTimeout(() => {
              this.completedClass = false;
            }, 800);
}

testHttp() {
    this.http.get('https://reqres.in/api/usersdelay=2').subscribe(res => {
    console.log(res);
    });
}

constructor(public router: Router ,private http: Http ,public progress: NgProgress) { }

标签： angularprogress-bar

Answer 1

您收到任何错误消息吗？

如果是，请附上错误信息