非同期ジョブが終了したときのUIコンポーネントへの指示方法？

Question

私はビューコンポーネントと通信するマネージャクラスを持っています。このマネージャクラスは、値を返す前に複数のAPI呼び出しを実行するメソッドを持っています。したがって、API呼び出しが終了したときにコンポーネントに何らかのインジケータを持たせます

export class MyManager { 

public stillBringingData = new BehaviorSubject<boolean>(false); 


public myAsyncFunc(animals: Animal[]): void { 

    let counter: number = 0; 

    animals.forEach((animal: Animal) => { 
     counter++; 
     this._myApService.getAnimalInfo(animal.id).subscribe((animalInfo: AnimalInfo) => { 
     //currentAnimalInfo is some behaviour subject hat the client listen too 
     this.currentAnimalInfo.next(animalInfo) 
     }); 
     this.stillBringingData.next(counter === animals.length) 
    }); 
    } 


} 

およびサブスクリプションで、この動作の対象に耳を傾けUIコンポーネント：私は、データがまだ来続ける一方で、いくつかのボタンを無効にする必要が原因なので、これをしませんでした。

少し不器嫌だと感じる方は、もっと古典的な方法がありますか？ nprogress
正確なバージョン： "NGX-プログレスバー"： "^ 2.0.4" の角4 /観測/ typescriptですと

おかげで、私は私の角度バージョン4で使用しています

Answer 1

進捗インジケータを作業

。 github source
統合の仕方は？
import { NgProgressService } from 'ngx-progressbar';：あなたはインジケータを表示するコンポーネントで

<ng-progress [positionUsing]="'marginLeft'" [minimum]="0.15" [maximum]="1" 
      [speed]="200" [showSpinner]="true" [direction]="'leftToRightIncreased'" 
      [color]="'#5be7cb'" [trickleSpeed]="250" [thick]="true" [ease]="'linear'" 
></ng-progress> 

2）：
app.component.html
IN 1）ヘッダが配置されている部分
constructor(private progressService: NgProgressService)

非同期アクションが（通常はHTTP呼び出しを開始し

3））：あなたはにボタンの状態をバインドしたい場合は、 this.progressService.done();

をまたは： this.progressService.start();
非同期動作が終了ボタンにボタンが自動的に状態をdisabled or enabledに変更することを通知するbooleanの場合、公開ブール値フィールドを作成する必要があります。 public isActionExecuting: boolean; は、非同期呼び出しの開始時にtrueにこのプロパティを設定、およびサブスクリプション内部：

<button type="button" class="btn btn-primary btn-action" 
       [disabled]="isActionExecuting" 
       (click)="startAsyncAction()">Start Async Action</button> 

：

this._myApService.getAnimalInfo(animal.id).subscribe((animalInfo: AnimalInfo) => { 
    //some stuff 
    this.isActionExecuting = false; 
    //other stuff 
    //if other async stuff starts here, then inside the subscription of that async should mark with false 

}) 

は、あなたがボタンdisable属性をバインドできHTMLから、ということ持ちます