Kątowy od usługi do układu elementów - kątowe, serwisowe, kątowe

Walczę z usługami Angular Services i nie mogę się dowiedzieć, o co chodzi.

Pracuję nad książką (z Obietnicami). Ze względu na wydajność, naprawiam mój kod za pomocą wtrysku serwisowego. Korzystam z usługi dla wszystkich żądań http (za usługą "reszta usługi"), dane są poprawnie pobierane w usłudze, ale nie ma sposobu, aby ją pobrać składnik. Aby sprawdzić, czy zostało to zrobione poprawnie, dodałem plik console.log do obietnicy serwisowej (populateBookList ()). Konsola pokazuje poprawną listę.

Dodałem także konsolę.zaloguj się do mojego komponentu, aby zobaczyć listę i jest ona pusta. Ponadto lista książek komponentów jest ładowana przed usługą. Wiem, że jest coś podejrzanego, ale nie potrafię ustalić, gdzie> _ <

Wszelkie wskazówki, porady, [inne] będą naprawdę mile widziane! Dzięki chłopaki!

To jest mój komponent:

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(){
}

}

To jest moja usługa

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;
}
}

Odpowiedzi:

0 dla odpowiedzi № 1

Zmień dwie funkcje do tego:

 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;
});
}

Otrzymasz oczekiwany rezultat.

---

0 dla odpowiedzi nr 2

Innym rozwiązaniem jest przejście z obietnic na mapę.

W moim przypadku musiałem zdobyć Jsona dla znanego obiektu. Najpierw usługa! Aby to zrobić, wywołuję mój RS, aby pobrać JSON wpisany jako Observable>:

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

Metoda extractData obsługuje odpowiedź (użyłem jej jako metody samodzielnie, ponieważ zamierzam ją później użyć):

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

Po drugie mój komponent. Dodaję usługę do moich dostawców w moim dekoratorze:

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

Utwórz instancję w konstruktorze:

constructor(private httpService:HttpService){}

A następnie zapisz się (jak pokazał Vivek Doshi, jeszcze raz dziękuję!) Do mojej metody obsługi, z błędami i obsługą sukcesu:

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 !"}))
}

W celu późniejszego odniesienia subskrybcja działa w następujący sposób: componentORservice.method (). subscribe (przetwarzanie danych, obsługa błędów, obsługa sukcesu).

Dzięki jeszcze raz!

A oto pełny kod:

Usługa :

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()
}
}

A komponent:

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 !"}))
}
}

---