Comment utiliser l'API REST avec Angular2?
C'est mon démo code:
produits.service.ts
getProducts(){
this.headers = new Headers();
this.headers.append("Content-Type", 'application/json');
this.headers.append("Authorization", 'Bearer ' + localStorage.getItem('id_token'));
return this.http.get('http://mydomain.azurewebsites.net/api/products',{headers:headers}).map(res => res.json().data);
}
produits.composante.ts
constructor(private productsService: ProductsService) { }
ngOnInit() {
this.productsService.getProducts().subscribe((res) => {
console.log(res);
});
}
Est-il nescessary d'importer quelque chose dans le ngModule
décorateur de consommer une API REST ou mon code est faux? Je peux obtenir les données souhaitées avec Facteur Extension Chrome mais pas avec Angulaire 2 code.
J'espère avoir expliqué mon problème.
Mise à jour
Ce sont les erreurs que j'obtiens:
- Ce que vous obtenez à la place des données que vous attendez? Une erreur? Rien du tout?
- semble que vous en avez 404, mais n'ont pas de gestionnaire de s'abonner à l'erreur.
- Pouvez-vous inspecter le réseau dans l'onglet développeur de la fenêtre, pour voir que la demande est envoyée à l'URL?
Vous devez vous connecter pour publier un commentaire.
Désolé de vous faire perdre votre temps.
C'était le problème:
app.le module.ts
Après avoir commenté le
in-mem server
et et lain-mem server data
le problème a disparu.Vous êtes de ne pas définir les en-têtes de la requête. Vous déclarez la
Headers
objet, mais vous n'avez pas réellement faire quelque chose avec elle.Vous devez les mettre dans le
get
fonction comme ceci:Je vous suggérons d'utiliser ngx-repos-ex: https://www.npmjs.com/package/ngx-rest-ex
C'est pratique, il vous suffit de spécifier le correspondant décorateur sur le dessus de la méthode et le type de retour, il remplacera votre corps de la méthode. Le type de retour peut être soit
Promise
ouObservable
selon la MÉTHODE HTTP d'annotation que vous avez spécifié.Mon code de démonstration pour votre cas: