angular2 http响应设置到类变量答案

【问题标题】：angular2 http response setting to class variableangular2 http响应设置到类变量
【发布时间】：2017-01-05 09:39:15
【问题描述】：

我正在进行 http 调用以从本地 json 文件中获取数据。由于收到响应的延迟，我无法在模板上显示响应数据。

服务正在进行 HTTP 调用以从 json 文件中获取数据。

export class DataBook {

  bookDetails: Array<Object>;

  constructor(public http: Http) {
      this.bookDetails = [];

  }

  makeDataReady(){
    this.http.get('assets/preloaded-data/booksummaries.json')
                  .map(res => res.json())
                  .subscribe(
                            data => this.bookDetails = data,
                            error => alert(error),
                            () => console.log(this.bookDetails) //output the json file content
                            );
  }

  appendBook(book:Object)
  {
    this.bookDetails.push(book);
  }

  getBooks():Array<Object>
  {
    return this.bookDetails;
  }


}

以下组件正在调用以启动 http 调用。

export class ShowreviewPage {

  items: Object;

  ngOnInit(){
        this.items = this.dataBook.makeDataReady();
  }

  constructor(public navCtrl: NavController, public navParams: NavParams, public dataBook: DataBook) {
        this.items = this.dataBook.getBooks();

      }

  ionViewDidLoad() {
    console.log("ion View did Load",this.items); // empty array output
  }


}

我是 Angular2 的新手。我很难理解为什么会有延迟响应？

【问题讨论】：

标签： angular ionic2 angular2-services

【解决方案1】：

不建议将 Http 调用放在构造函数中（有关详细信息，请参阅此 - Difference between Constructor and ngOnInit）

如果您将它放在 ngOnInit 或 ionViewDidLoad 中，它应该不会导致任何空间延迟 - 试试吧。

另外，在您的代码示例中，构造函数出现在第二个（在 ngOnInit 之后）——它不会导致错误，但它非常不标准。

【讨论】：

我把 HTTP 调用放在 ngOnInit 中它停止工作了。
HTTP 调用在服务内部；我不能在那里使用 ngOnInit

【解决方案2】：

我自己找到了解决方案。我刚刚在this.bookDetails = [];like 之后在提供者或服务构造函数中进行了http调用

constructor(public http: Http) {
    this.bookDetails = [];
    this.init();

}


init(): void {
    this.http.get('assets/preloaded-data/booksummaries.json')
        .map(res => res.json())
        .subscribe(
            data => this.bookDetails = data,
            error => alert(error),
            () => console.log(this.bookDetails) //output the json file content
        );
}

它工作正常。总之谢谢大家！

【讨论】：