angulaire 2 comment retourner les données de l'abonnement

C'est Ce que je Veux Faire.

@Component({
   selector: "data",
   template: "<h1>{{ getData() }}</h1>"
})

export class DataComponent{
    this.http.get(path).subscribe({
       res => return res;
    })
}

Si getData a été appelée à l'intérieur de la DataComponentVous pouvez suggérer l'affecter à une variable comme this.data = res et d'utilisation j'aime {{data}}.Mais j'avais besoin d'utiliser comme {{getData}} pour mon propre usage.Merci de me suggérer?

source d'informationauteur tsadkan yitbarek

  1. 34

    Vous juste ne pouvez pas retourner directement la valeur parce que c'est un appel asynchrone.
    Un appel asynchrone signifie qu'il est en cours d'exécution en arrière-plan (en fait, planifiée pour la fin de l'exécution), tandis que votre code continue de s'exécuter.

    Vous aussi vous ne pouvez pas avoir un tel code dans la classe. Il doit être déplacé dans une méthode ou le constructeur.

    Ce que vous pouvez faire est de ne pas subscribe() directement, mais utiliser un opérateur comme map() 

    export class DataComponent{
    someMethod() {
      return this.http.get(path).map(res => {
        return res.json();
      });
    }
}

    En outre, vous pouvez combiner plusieurs .map avec les mêmes Observables que parfois cela améliore code de la clarté et de la garde des choses distinctes. Exemple:

    validateResponse = (response) => validate(response);

parseJson = (json) => JSON.parse(json);

fetchUnits() {
    return this.http.get(requestUrl).map(this.validateResponse).map(this.parseJson);
}

    De cette façon observable sera de retour à l'appelant pouvez vous abonner à

    export class DataComponent{
    someMethod() {
      return this.http.get(path).map(res => {
        return res.json();
      });
    }

    otherMethod() {
      this.someMethod().subscribe(data => this.data = data);
    }
}

    L'appelant peut également l'être dans une autre classe. Ici c'est juste pour des raisons de concision.

    data => this.data = data

    et

    res => return res.json()

    sont fléchées fonctions. Ils sont semblables à des fonctions normales. Ces fonctions sont passés à subscribe(...) ou map(...) être appelée à partir de l'observable lorsque les données arrivent de la réponse.
    C'est pourquoi les données ne peuvent pas être retournés directement, parce que quand someMethod() est terminé, les données n'a pas encore reçu.

  2. 3

    Deux façons que je connais:

    export class SomeComponent implements OnInit
{
    public localVar:any;

    ngOnInit(){
        this.http.get(Path).map(res => res.json()).subscribe(res => this.localVar = res);
    }
}

    Cela va affecter votre résultat dans la variable locale une fois que l'information est retournée comme une promesse. Alors que vous venez de faire {{ localVar }}

    Une autre Façon est d'obtenir un observables comme un localVariable.

    export class SomeComponent
{
    public localVar:any;

    constructor()
    {
        this.localVar = this.http.get(path).map(res => res.json());
    }
}

    De cette façon, vous êtes exposant une observable à quel point vous pouvez faire dans votre code html est d'utiliser AsyncPipe {{ localVar | async }}

    Veuillez essayer et laissez-moi savoir si cela fonctionne. Aussi, depuis angulaire 2 est assez nouveau, n'hésitez pas à commenter si quelque chose va mal.

    Espère que cela aide