Angular 2 中带有 Observable 的 http 无法使用数据

我是 Angular 2 和 Observables 的新手，但我想尝试一下。所以我安装了 angular-cli 并做了一个简单的测试项目。

我想要它做的就是读取一个 json 文件并处理组件内部的数据（第一个目的是提供服务，但我想从低基础开始）。

所以我在assets/json文件夹中创建了一个json文件（testjson.json）：

{
  "teststring": "test works"
}

然后我从 Angular 导入了 http，并在 content.component.ts 文件中导入了 rxjs 地图内容：

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {

  title: string = "Default";
  data;

  constructor(private http:Http) {
    http.get('assets/json/testjson.json').map(res => res.json()).subscribe(data => {this.data = data; this.title = data.teststring; console.log(this.data);});
  }

  ngOnInit() {

  }

}

到目前为止一切顺利，应用程序打印出以下内容：

app works!

test works [object Object]

但我想在整个组件中使用这些数据，而不仅仅是在构造函数中。但如果我尝试在构造函数之外（在 ngOnInit 函数内）console.log“this.data”，它会在控制台中打印 undefined 。

我知道，它一定与异步加载有关，但不幸的是我不知道如何告诉应用程序等待 this.data 被填充。

我希望你能帮助我。当然，将来我想要一种可以执行此类操作的服务，并且多个组件应该从中获取数据。

提前致谢！

• 您应该将初始化代码移至初始化方法。
• 回调完成后，您的数据就可用。在您的模板中您可以使用*ngIf一旦有数据就执行块内的代码。只要*ngIf不评估为 true 内部代码将不会运行。
• 你唯一能跑的方法console.log(data)是来自回调内部或从回调中调用，因为您必须等待数据加载。

内容.组件.html

<div *ngIf="data">
  <span>{{data.teststring}}</span>
</div>

内容.组件.ts

export class ContentComponent implements OnInit {

  title: string = "Default";
  data: any = null;

  constructor(private http:Http) {
  }

  ngOnInit() {
    this.http.get('assets/json/testjson.json')
      .map(res => res.json())
      .subscribe(data => {
        this.data = data;
        this.title = data.teststring;
        console.log(this.data);
      });
  }
}

Edit

回应下面的评论如果您抽象出对服务的 http 调用，您可以看到完全相同的逻辑仍然适用。您仍在使用数据承诺的概念，并且一旦完成，您就可以订阅该承诺。这里唯一的区别是 http 调用被抽象到不同的类。

内容.组件.ts

export class ContentComponent implements OnInit {

  title: string = "Default";
  data: any = null;

  // inject service
  constructor(private contentService:ContentService) {
  }

  ngOnInit() {
    this.contentService.getData()
      .subscribe(data => {
        this.data = data;
        this.title = data.teststring;
        console.log(this.data);
      });
  }

Service

export class ContentService {

  constructor(private http:Http) {
  }

  getData(): IObservable<{teststring:string}> { // where string can be some defined type
    return http.get('assets/json/testjson.json')
      .map(res => res.json() as {teststring:string});
  }