web-dev-qa-db-fra.com

angular 2 comment renvoyer des données d'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 vous appelez getData dans la DataComponent, vous pouvez lui affecter une variable telle que this.data = res et l’utiliser comme {{data}}. Mais j’avais besoin de l’utiliser comme {{getData}} à mes propres fins. Suggérez-moi?

javascriptangulartypescriptasynchronous
38
tsadkan yitbarek

Vous ne pouvez simplement pas renvoyer la valeur directement car il s'agit d'un appel asynchrone. Un appel asynchrone signifie qu'il s'exécute en arrière-plan (en fait, il est programmé pour une exécution ultérieure) pendant que votre code continue de s'exécuter.

Vous ne pouvez pas non plus avoir ce code directement dans la classe. Il doit être déplacé dans une méthode ou le constructeur.

Ce que vous pouvez faire n'est pas de subscribe() directement, mais d'utiliser un opérateur tel que 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, car cela améliore parfois la clarté du code et permet de séparer les éléments. 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 un observable sera retourné à l'appelant peut s'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 être dans une autre classe. Ici c'est juste pour la brièveté.

data => this.data = data

et

res => return res.json()

sont des fonctions de flèche. Ils sont similaires aux fonctions normales. Ces fonctions sont transmises à subscribe(...) ou map(...) pour être appelées à partir de l'observable lorsque des données proviennent de la réponse. C'est pourquoi les données ne peuvent pas être renvoyées directement, car lorsque someMethod() est terminé, les données n'ont pas encore été reçues.

48
Günter Zöchbauer

Je connais deux façons:

export class SomeComponent implements OnInit
{
    public localVar:any;

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

Cela affectera votre résultat à une variable locale une fois que les informations sont renvoyées, comme dans une promesse. Ensuite, vous ne faites que {{ localVar }}

Une autre méthode consiste à obtenir une variable observable en tant que variable locale.

export class SomeComponent
{
    public localVar:any;

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

De cette façon, vous exposez un élément observable auquel vous pouvez faire référence dans votre code HTML en utilisant AsyncPipe {{ localVar | async }}

S'il vous plaît essayez-le et laissez-moi savoir si cela fonctionne. De plus, comme angular 2 est récent, n'hésitez pas à commenter si quelque chose ne va pas.

J'espère que ça aide

6
qwerty_igor