Angular 从服务到组件阵列的角度

我正在为角度服务而挣扎，无法找出问题所在

我正在开发一个图书应用程序（带有承诺）。出于效率考虑，我正在使用服务注入重构代码。我将该服务用于所有http请求（后面有一个rest服务），数据在服务中正确检索，但无法在组件中获取。 为了检查操作是否正确，我在服务承诺（populateBookList（））中添加了一个console.log。 控制台显示正确的列表

我还在我的组件中添加了一个console.log来查看列表，它是空的。此外，组件图书列表在服务图书列表之前加载。 我知道有点可疑，但不知道在哪里 公司的线索，建议，[其他]将不胜感激！谢谢你们/P p这是我的组件：/p 从'@angular/core'预导入{Component，OnInit，Input}； 从'@angular/Http'导入{Http}； 从“../domain/Book”导入{Book}； 从'priming/priming'导入{Message}； 从“../domain/Author”导入{Author}； 从“./service/http.service”导入{HttpService}； 从“rxjs/Observable”导入{Observable}； @组成部分({ 选择器：'lib-book'， templateUrl:'./book.component.html'， 提供者：[HttpService] }) 导出类BookComponent实现OnInit{ _httpService:httpService； urlRef：字符串； 书籍：ArrayBook； 作者列表：ArrayAuthor； 公共MSG：消息[]=[]； 构造函数（私有httpService:httpService，私有http:http）{ 这是.\u httpService=httpService； this.\u httpService.populateBookList（this.msgs）； this.books=this.\u httpService.getBooks（）； } ngOnInit（）{ } } /编码/预编码 p这是我的服务/p 从“@angular/core”预导入{Injectable}”； 从“../../domain/Book”导入{Book}； 从'@angular/Http'导入{Http}； 从“../../domain/Author”导入{Author}； 导入“rxjs/add/operator/toPromise”； 导入'rxjs/add/operator/map'； 从“rxjs/Observable”导入{Observable}； @可注射（） 导出类HttpService{ 私有urlRef:字符串=”http://localhost:8080/Librarian-1.0/ws/“； 私人书单：ArrayBook； 构造函数（专用http:http）{ this.bookList=新建ArrayBook（）； } 大众图书目录（msgs）{ this.http.get（this.urlRef+“book”） .toPromise（） .then（response=>this.bookList=response.json（）作为数组） .then（（）=>console.log（this.bookList）） .then（（）=>msgs.push（{严重性：'info'，摘要：'Book list'，详细信息：'Loaded successfully！'}）） .catch（（）=>msgs.push（{严重性：'error'，摘要：'Book list'，详细信息：'Can not load list.'}））； } getBooks（）：Book[]{ 返回此.bookList； } }

---

将两个函数更改为：

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

populateBookList（msgs）{
返回this.http.get（this.urlRef+“book”）.map（响应=>{
this.bookList=response.json（）作为数组；
console.log（this.bookList）；
推送（{严重性：'info'，摘要：'Book list'，详细信息：'Loaded successfully！'}
返回此.bookList；
}).catch（（）=>msgs.push（{严重性：'error'，摘要：'Book list'，详细信息：'cannotload list.'}））；；
}
构造函数（私有httpService:httpService，私有http:http）{
这是.\u httpService=httpService；
this.\u httpService.populateBookList（this.msgs）.subscribe（res=>{
this.books=res；
});
}

---

您将获得预期的结果。

另一个解决方案是从承诺转换为映射

在我的例子中，我必须为一个已知对象获取一个Json。 首先是服务！ 为此，我调用我的RS来检索一个类型为Observable>的JSON：

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

其次是我的组成部分。 我将服务添加到我的Decorator中的提供商：

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

在构造函数中实例化它：

constructor(private httpService:HttpService){}

然后订阅（如Vivek Doshi所示，再次感谢！）我的服务方法，错误和成功处理：

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

为供以后参考，subscribe的工作如下： componentORservice.method（）.subscribe（数据处理、错误处理、成功处理）

再次感谢

下面是完整的代码：

服务：

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

从“@angular/core”导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从“rxjs/Observable”导入{Observable}；
从“../../domain/Author”导入{Author}；
从“../../domain/Book”导入{Book}；
@可注射（）
导出类HttpService{
私有urlRef:字符串=”http://your_url";
构造函数（专用http:http）{
}
getBooks（）：可观察{
返回this.http.get（this.urlRef+“book”）.map（this.extractData）；
}
getAuthors（）：可观察{
返回this.http.get（this.urlRef+“author”）.map（this.extractData）；
}
提取数据（res:Response）{
return res.json（）
}
}

和组件：

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

从'@angular/core'导入{Component，OnInit，Input}；
从'@angular/Http'导入{Http}；
从'priming/priming'导入{Message}；
从“./service/http.service”导入{HttpService}；
从“rxjs/Observable”导入{Observable}；
从“../domain/Book”导入{Book}；
从“../domain/Author”导入{Author}；
@组成部分({
选择器：'lib-book'，
templateUrl:'./book.component.html'，
提供者：[HttpService]
})
导出类BookComponent实现OnInit{
书籍：数组；
msgs:Message[]=[]；
构造函数（私有httpService:httpService）{
}
ngOnInit（）{
this.httpService.getBooks（）
.订阅(
data=>{this.books=data}，
（）=>this.msgs.push（{严重性：'error'，摘要：'Book list'，详细信息：'cannotload list.'}），
（）=>this.msgs.push（{严重性：'info'，摘要：'Book list'，详细信息：'Loaded successfully！'））
}
}

您正在执行异步操作，但希望同步执行赋值。意思是：调用时，

populateBookList

中的数据尚未到达

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

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

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