Je suis nouveau dans angular et cela peut sembler idiot mais je n'ai pas compris comment ce code fonctionne

this.ms.getList().then((hl) => { this.HeroesList = hl; });

J'ai appelé la méthode de service, en cas de succès ce qu'elle renvoie?

Deuxièmement, comment cette fonction de flèche a obtenu le tableau de héros que mon service doit renvoyer, puis attribue le tableau à ma variable de composant,

Mon code de composant:

constructor(private ms: myService) {
  }
  ngOnInit() {
    this.ms.getList().then((hl) => { this.HeroesList = hl; });
  }

Et voici le service:

import { Injectable } from '@angular/core'
import { Hero } from './hero'
import { HeroesList } from './heroesList'
@Injectable()
export class myService {
    heroes: Hero[];
    getList(): Promise<Hero[]> {
        return Promise.resolve(HeroesList);//when success, return the list 
    }

}
2
Daniyal Javaid 31 mars 2017 à 19:44

2 réponses

Meilleure réponse

Cela peut être plus facile à comprendre si vous regardez comment le TypeScript est transpilé en JavaScript (ES5).

Votre TypeScript:

this.ms.getList().then((hl) => { this.HeroesList = hl; });

Transpilé en JavaScript:

this.ms.getList().then(function(hl) { 
    this.HeroesList = hl; 
});

La fonction Promise .then() accepte deux fonctions de rappel, une pour un rappel de succès et une pour un rappel d'erreur. Vous utilisez uniquement le rappel de réussite. Par conséquent, lorsque .then() est exécuté sur votre promesse, si votre promesse est réussie, elle rappellera votre fonction de réussite définie. Votre fonction de réussite définie définit ensuite votre variable de service sur le résultat résolu de votre promesse.

3
Ben Beck 31 mars 2017 à 16:50

Lorsque la promesse se résout ... elle renvoie la liste des héros qui est le h1 dans le composant puis fonctionne.

1
RemyaJ 31 mars 2017 à 16:50