Angulaire 2 barre de progression en temps réel

Dans mon Angulaire 2 de l'application, j'ai souscrit à un service simple d'extraire des données à partir d'une base de données à distance et de les afficher dans un tableau. Tout fonctionne très bien et maintenant je veux ajouter une barre de progression pour afficher le temps réel progrès pour la récupération de données à partir du serveur.
Je suis actuellement en utilisant primeng progressbar composant pour montrer le progrès. Mais Il ne peut être fourni qu'un temps fixe pour afficher la progression comme dans le code ci-dessous,

ngOnInit() {
    let interval = setInterval(() => {
        this.value = this.value + Math.floor(Math.random() * 10) + 1;
        if(this.value >= 100) {
            this.value = 100;
            this.msgs = [{severity: 'info', summary: 'Success', detail: 'Process Completed'}];
            clearInterval(interval);
        }
    }, 2000);
}

2000 correspond à la durée (en millisecondes) de la barre de progression est affichée.
Mais ce dont j'ai besoin n'est-ce pas, j'ai besoin d'afficher la barre de progression à l'origine et remplir la barre de progression de manière dynamique et en temps réel jusqu'à ce que les données réelles d'extraction terminée. La barre de progression doit être rempli et de l'invisible après l'extraction de données complète et juste avant que les données rendues à la vue de la table.

Est-il logique de faire d'autres que de fournir la statique de temps pour que la barre de progression? Toutes les solutions autres que primeng sont les bienvenus.

Merci d'avance.

Mise à jour:

Ma classe de service,

@Injectable()
export class MyService {
    constructor(public http:Http) {
    }

search(criteria:SearchObject):Observable<ResponseObject>{
    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });    
    return        this.http.post(URL,JSON.stringify(criteria),options)
      .map(res => res.json())
}

}

Ma classe de composant,

export class SearchComponent{

    var response;
    constructor(public myService:MyService) {
    }

    search(): void {

     //Need to show the progress bar here

        var criteria = new SearchObject();
        //set data to the criteria object
       this.myService.search(criteria)
         .subscribe(
           data => {
             this.response = data;;
         },
       );            
      //close the progress bar after completing communicating with server

    }

}

Sons similaires stackoverflow.com/questions/37158928/...

OriginalL'auteur icSapper | 2016-06-03

  1. 2

    Vous pourriez tirer parti de la onprogress événement fourni par XHR. Cela permet d'obtenir des indications sur la progression du téléchargement.

    Ce n'est pas pris en charge hors de la boîte par Angular2 mais vous pouvez le brancher l'étendue de la BrowserXhr classe:

    @Injectable()
export class CustomBrowserXhr extends BrowserXhr {
  constructor(private service:ProgressService) {}
  build(): any {
    let xhr = super.build();
    xhr.onprogress = (event) => {
      service.progressEventObservable.next(event);
    };
    return <any>(xhr);
  }
}

    et remplacer le BrowserXhr fournisseur avec l'étendue:

    bootstrap(AppComponent, [
  HTTP_PROVIDERS,
  provide(BrowserXhr, { useClass: CustomBrowserXhr })
]);

    La ProgressService classe pourrait ressembler à la suivante:

    export class ProgressService {
  progressEventObservable:Subject<any> = new Subject();
}

    Voir ce plunkr: http://plnkr.co/edit/8MDO2GsCGiOJd2y2XbQk?p=preview.

    Modifier

    Lorsque vous commencez à obtenir les données, vous pouvez afficher votre barre de progression et de vous abonner sur le progressEventObservable observables. Ce dernier vous permettra de mettre à jour la barre de progression. Lorsque la demande est complète (sur une carte ou abonnez-vous de rappel), vous pouvez fermer la barre de progression.

    Voici un exemple:

    fetchData() {
  //Display progress bar
  //...

  let subscription = this.progressService.progressEventObservable.subscribe(
    (event) => {
      //Update progress bar
      //...
    }
  );

  return this.http.get('...')
    .map(res => {
      //Hide progress bar
      //...

      //Unsubscribe
      subscription.unsubscribe();

      return res.json();
    });
}
    Votre xhr.onprogress événement dans le plunkr fonctionne, mais il ne renvoie les informations de progression une fois que le téléchargement est terminé. Ceci est probablement lié à votre travail d'édition ci-dessus. Est-il possible que vous pourriez adapter votre modifier dans le plunkr? Merci beaucoup.
    Salut @ThierryTemplier, j'ai suivi votre solution, j'ai créé un CustomBrowserXhr classe et ProgressService classe. Aussi surdéfini la BrowserXhr fournisseur à la méthode du bootstrap. Dans ma recherche-classe de service, je viens de connecté, [tout comme une variable numérique] les progrès que votre exemple, "fetchData()" la méthode. Mais dans l'abonnement bloc de code..le progrès n'est pas mise à jour et dans le http.la méthode get, je peux le journal le progrès après la fin de la récupération de données. Pourquoi je ne peux pas mettre à jour l'avancement de la valeur ? Et comment puis-je passer ce progrès de la valeur de mon composant?
    Il ne semble pas @FernOfTheAndes a raison: il est tout et bien, pourtant, les progrès réels seront repercuted tout à la fois lors de l' (upload dans mon cas) si complètement terminé, quel genre de défaites le but. Est-il quelque chose que nous devrions prêter une attention particulière pour les événements à bulle dans le réel?

    OriginalL'auteur Thierry Templier