Avez la composante fonction execute après le service http.obtenez de l'appel est terminé

Je vais avoir vraiment du mal à enveloppant ma tête autour des observables et des abonnements dans angular2. Le problème que je rencontre actuellement est le suivant:

J'ai un service qui contient des méthodes post et get de données à partir d'une API. Le service est injecté dans un composant, qui appelle directement ces méthodes dans le service. Le service récupère ensuite les données et les stocke lui-même, mais je veux la traiter ces données dans le composant. Je ne peux pas travailler sur la façon d'avoir le composant exécuter une fonction après que le service a récupéré et stocké les données lui-même.

service.ts

import { Injectable } from 'angular2/core';    
import { Http } from 'angular2/router';

@Injectable()
export class Service {
    result: Object;

    constructor(http: Http) {
        this.http = http;
    }

    httpGet(url) {
        return this.http.get(url).subscribe(
            result => this.result = result.json(),
            error => console.log(error),
            () => {}
        )
    }
}

composant.ts

import { Component } from 'angular2/core';
import { Service } from './service';

@Component({
    ...
})
export class Component {
    formattedResult: Object;

    constructor(service: Service) {
        this.service = service;
        this.service.httpGet('/api')

        //How do I call format result on service.result only after it is completed?
        this.formatResult(service.result) //Need to execute this after the http call is completed

        //I want something like:
        this.service.httpGet('/api').then(() => formatResult(this.service.result));
    }

    formatResult(result) {
        this.formattedResult = result.map(x => x.length) //For example
    }
}

stackoverflow.com/questions/34739574/...
Merci, sa fin mais je voulais garder .abonnez-vous dans le service, car il stocke l'information elle-même pour un accès ultérieur. Il n'est pas possible d'avoir les deux .s'abonne sur un http.obtenir (on va l'appeler deux fois). À moins acceptée dans le modèle de conception est d'avoir .abonnez-vous uniquement dans les composants et définir explicitement le service des variables de la composante? Je voulais garder le service et composant logique séparés est tout.
stackoverflow.com/a/34405243/215945 - que répondre à des chaînes observables à l'aide de flatMap().

OriginalL'auteur Peter Trotman | 2016-01-12

5

Pour répondre à ma propre question:

Dans la racine d'application, l'importation Rxjs avec:
```
import 'rxjs/Rx';
```
Cela vous donne un accès complet à l'objet observé (pas seulement les " Observables-lite inclus Angulaire). Cela vous permet de .carte .réduire les etc. les requêtes Http.

Vous pouvez maintenant utiliser .carte sur une requête Http pour exécuter du code arbitraire dans le contexte du service, même si c'est le composant qui s'abonne à la suite. Afin de réaliser ce que je dois faire dans le début, nous pouvons:

service.ts
```
import { Injectable } from 'angular2/core';    
import { Http } from 'angular2/router';

@Injectable()
export class Service {
    result: Object;

    constructor(http: Http) {
        this.http = http;
    }

    httpGet(url) {
        return this.http.get(url).map(
            result => {
                let data = result.json();
                this.result = data;
                return data
            }
        )
    }
}
```
composant.ts
```
import { Component } from 'angular2/core';
import { Service } from './service';

@Component({
    //Component setup
})
export class Component {
    formattedResult: Object;

    constructor(service: Service) {
        this.service = service;
        this.service.httpGet('/api').subscribe(
            data => this.formatResult(data);
        );
    }

    formatResult(result) {
        this.formattedResult = result.map(x => x.length) //For example
    }
}
```
Grâce à Gunter et de Marque pour les réponses, m'a aidé à envelopper ma tête autour de cela un peu et j'ai l'impression de comprendre les phénomènes Observables beaucoup mieux après avoir parcouru beaucoup de docs la résolution de ce problème!!!!

Pour inclure les opérateurs de rxjs de créer le fichier rxjs-extensions.ts et de l'inclure dans votre polyfils, ajouter les importations pour les opérateurs de l'importation "rxjs/opérateur/carte" etc. Aussi ne jamais importer plein lib importer 'rxjs/Rx cause, il n'est pas nécessaire. Vous pouvez vérifier ce qui est inclus dans votre carte avec carte source explorateurs de différents types de webpack, angulaire, js
Après beaucoup de luttes. Enfin, son travail pour moi, merci homme.

OriginalL'auteur Peter Trotman
2

Vérifier si le résultat est déjà arrivé, si oui, de créer une nouvelle promesse et le compléter avec le résultat, pas à pas, le récupérer et de le retourner comme promesse.
```
@Injectable()
export class Service {
    result: Object;

    constructor(http: Http) {
        this.http = http;
    }

    httpGet(url) {
        if(result === undefined) {
          return this.http.get(url).toPromise().then(
              result => this.result = result.json(),
              error => console.log(error);
          );
        } else {
          return new Promise().resolve(result);
        }
    }
}
```
Je ne sais pas TS et ce code peut contenir quelques erreurs (j'utilise Angulaire seulement Dart), mais vous devriez obtenir l'idée.

Voir également

- http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html

Ok, cool, je peux voir comment cela fonctionne. Semble être un peu une honte de les convertir à des Promesses de sorte que vous pouvez .puis la chaîne. J'espérais qu'il y a quelques nouveaux observables façon de faire que je ne le savais pas à propos. Oh bien merci!
Comme je l'ai mentionné, je ne suis pas un TS développeur, mais d'autres posts que j'ai vu, il semble que le chemin à parcourir.

OriginalL'auteur Günter Zöchbauer
0

Bien vous pouvez utiliser une fonction de rappel dans ce cas,

Prendre exemple
considère que c'est le post de la fonction qui déclenche le service de la poste dans le module de service
```
postData(id: string, name: string) {
    console.log("Got you",id);
  this._employeeService.postServices({id: id, name: name})
    .subscribe(
      (response:Response) => this.consoleMyOutput(),
      error => console.log(error)
    );  
}
```
Ici remarque la fonction consoleMyOutput().
Ce sera déclenchée une fois que la réponse est reçue après que le service a été appelé

Maintenant,
```
consoleMyOutput(){console.log("Write Your call back function")};
```
Cette fonction sera déclenchée juste après que.

OriginalL'auteur Ranjan kumar

Il peut arriver simplement avec Rxjs méthodes , ici, est simple et classique, d'appeler les services d'une fois après l'application chargée alors nous pouvons nous inscrire dans de multiples composants.
Assurez-vous que les services devraient être réutilisables pour tous, afin de faire plus que u peut le faire code dans les services et la carte, de s'abonner uniquement à la composante :

Services:

 import { Injectable } from 'angular2/core';    
 import { Http } from 'angular2/http';

 @Injectable()
 export class Service {
     result: Object;

     constructor(private http: Http) {}

     private _urlGet = '/api';

     httpGet(){
        return this.http.get(this._urlGet)
          .map(res => JSON.parse(res.json()))
          .do(result => {
             this.result = result;
           }, error => console.log(error))
     }
  }

Composant

 export class Component {
    formattedResult: Object;

    constructor(private service: Service) { }

    ngOnInit(){
       this.service.httpGet().subscribe(result => {
          this.formattedResult = result;
       }
    }
 }

OriginalL'auteur asad mohd

Vous devez vous connecter pour publier un commentaire.