Angular de servicio a matriz de componentes: angular, servicio, promesa angular

Estoy luchando con los servicios angulares y no puedo averiguar cuál es el problema.

Estoy trabajando en una aplicación de libro (con Promesas). Por razones de eficiencia, estoy refactorizando mi código con la inyección del servicio. Utilizo el servicio para todas las solicitudes http (hay un servicio de descanso detrás), los datos se recuperan correctamente en el servicio, pero no hay manera de hacerlo. el componente. Para verificar si se hizo correctamente, he agregado una console.log en la promesa de servicio (populateBookList ()). La consola muestra la lista correcta.

También he añadido una consola.inicie sesión en mi componente para ver la lista y está vacía. Además, la lista de componentes se carga antes que la lista de servicios. Sé que hay algo sospechoso, pero no puedo averiguar dónde> _ <

¡Cualquier pista, consejo, [otro] sería realmente apreciada! ¡Gracias chicos!

Este es mi componente:

import { Component, OnInit, Input } from "@angular/core";
import { Http } from "@angular/http";
import { Book } from "../domain/book";
import { Message } from "primeng/primeng";
import { Author } from "../domain/author";
import { HttpService } from "./service/http.service";
import { Observable } from "rxjs/Observable";

@Component({
selector:"lib-book",
templateUrl:"./book.component.html",
providers: [HttpService]
})

export class BookComponent implements OnInit{
_httpService: HttpService;
urlRef:String;
books:Array<Book>;
authorList:Array<Author>;

public msgs:Message[]=[];

constructor(private httpService:HttpService, private http:Http){
this._httpService = httpService;
this._httpService.populateBookList(this.msgs);
this.books = this._httpService.getBooks();

}

ngOnInit(){
}

}

Este es mi servicio

import { Injectable } from "@angular/core";
import { Book } from "../../domain/book";
import { Http } from "@angular/http";
import { Author } from "../../domain/author";

import "rxjs/add/operator/toPromise";
import "rxjs/add/operator/map";
import { Observable } from "rxjs/Observable";

@Injectable()
export class HttpService{
private urlRef:String = "http://localhost:8080/Librarian-1.0/ws/";
private bookList:Array<Book>;

constructor(private http:Http){
this.bookList = new Array<Book>();
}

populateBookList(msgs){
this.http.get(this.urlRef+"book")
.toPromise()
.then(response => this.bookList = response.json() as Array<Book>)
.then(() => console.log(this.bookList))
.then(() => msgs.push({severity:"info", summary:"Book list",detail:"Loaded succesfully !"}))
.catch(() => msgs.push({severity:"error", summary:"Book list",detail:"Can not load list."}));
}

getBooks():Book[]{
return this.bookList;
}
}

Respuestas

0 para la respuesta № 1

Cambia tus dos funciones a esto:

 populateBookList(msgs){
return this.http.get(this.urlRef+"book").map(response => {
this.bookList = response.json() as Array<Book>;
console.log(this.bookList);
msgs.push({severity:"info", summary:"Book list",detail:"Loaded succesfully !"}
return this.bookList;
}).catch(() => msgs.push({severity:"error", summary:"Book list",detail:"Can not load list."}));;
}


constructor(private httpService:HttpService, private http:Http){
this._httpService = httpService;
this._httpService.populateBookList(this.msgs).subscribe(res => {
this.books = res;
});
}

Y obtendrá el resultado esperado.

---

0 para la respuesta № 2

Otra solución es cambiar de Promesas a mapa.

En mi caso, tuve que conseguir un Json para un objeto conocido. Primero el servicio! Para hacerlo, llamo a mi RS para recuperar un JSON escrito como Observable>:

getBooks():Observable<Book[]>{
return this.http.get(this.urlRef+"book").map(this.extractData);
}

El método extractData maneja la respuesta (lo usé como un método por sí mismo porque lo reutilizaré más adelante):

extractData(res: Response){
return res.json()
}

En segundo lugar mi componente. Agrego el servicio a mis proveedores en mi decoractor:

@Component({
selector:"lib-book",
templateUrl:"./book.component.html",
providers: [ HttpService ]
})

Instálate en el constructor:

constructor(private httpService:HttpService){}

Y luego suscríbase (como lo demostró Vivek Doshi, ¡gracias de nuevo!) A mi método de servicio, con error y manejo exitoso:

ngOnInit(){
this.httpService.getBooks()
.subscribe(
// opération à réaliser
data => {this.books = data},
// gestion de l"erreur
()=> this.msgs.push({severity:"error", summary:"Book list",detail:"Can not load list."}),
// gestion de la réussite
() => this.msgs.push({severity:"info", summary:"Book list",detail:"Loaded succesfully !"}))
}

Para referencia posterior, la suscripción funciona de la siguiente manera: componentORservice.method (). subscribe (manejo de datos, manejo de errores, manejo de éxito).

¡Gracias de nuevo!

Y aquí está el código completo:

Servicio :

import { Injectable } from "@angular/core";
import { Http, Response } from "@angular/http";

import { Observable } from "rxjs/Observable";

import { Author } from "../../domain/author";
import { Book } from "../../domain/book";

@Injectable()
export class HttpService{
private urlRef:String = "http://your_url";

constructor(private http:Http){
}

getBooks():Observable<Book[]>{
return this.http.get(this.urlRef+"book").map(this.extractData);
}

getAuthors():Observable<Author[]>{
return this.http.get(this.urlRef+"author").map(this.extractData);
}

extractData(res: Response){
return res.json()
}
}

Y el componente:

import { Component, OnInit, Input } from "@angular/core";
import { Http } from "@angular/http";
import { Message } from "primeng/primeng";

import { HttpService } from "./service/http.service";
import { Observable } from "rxjs/Observable";

import { Book } from "../domain/book";
import { Author } from "../domain/author";

@Component({
selector:"lib-book",
templateUrl:"./book.component.html",
providers: [ HttpService ]
})

export class BookComponent implements OnInit{
books:Array<Book>;
msgs:Message[]=[];

constructor(private httpService:HttpService){
}

ngOnInit(){
this.httpService.getBooks()
.subscribe(
data => {this.books = data},
()=> this.msgs.push({severity:"error", summary:"Book list",detail:"Can not load list."}),
() => this.msgs.push({severity:"info", summary:"Book list",detail:"Loaded succesfully !"}))
}
}

---