Angular 2-从json文件获取数据

如何从angular 2项目中的JSON获取数据？我尝试过（下面的代码），但这不起作用。也许我忘了一些细节。。。非常感谢你的回答

另外，我需要在我的html上显示json文件中包含的“uno”

app.component.ts：

     import { Component } from '@angular/core';
     import {Http} from '@angular/http';

    @Component({
        selector: 'app-header',
        templateUrl: '../partials/app.header.html',
        styleUrls: ['../css/partials/app.header.css']
    })
        export class AppComponent {
          title = 'app works!';
          data;
          constructor(private http:Http) {
                this.http.get('app/header.json')
               .subscribe(res => this.data = res.json());
          }
        }

app.module.ts：

    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { FormsModule } from '@angular/forms';
    import { HttpModule } from '@angular/http';
    import { AppComponent } from './app.component';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        HttpModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

app.header.html：

<header>
    {{title}}//this works
    {{elemento}}//here i want to show "uno" included in json file
    ...
</header>

就这样

<header>
    {{title}}
    {{data?.elemento}}
</header>

{{title}}
{{data？.elemento}

就这么做吧

{{data?.elemento}}

---

应该返回get方法，所以使用RX js可观察模式 就这样,

从'@angular/core'导入{Component}；
从'@angular/Http'导入{Http}；
从rxjs导入*；
@组成部分({
选择器：“应用程序标题”，
templateUrl:“../partials/app.header.html”，
样式URL:['../css/partials/app.header.css']，
提供者：[]
})
导出类AppComponent{
title='appworks！'；
资料：有；
构造函数（专用http:http）{
this.http.get（'app/header.json'））
.subscribe（res=>this.data=res.json（））
.map（（res:Response）=>Response.json（））
.接住（这个.把手错误）；
}
}

{{title}}
{{data？.elemento}

在我看来，没有reason@Jamil89请接elvis接线员并尝试更新答案谢谢！现在它工作了…我需要在数据旁边写“？”。我如何找到有关此特定项目的文档以提高我的知识？感谢在

get

请求成功之前，

this.data

未定义。因此，当您尝试访问

data.elemento

时，会发生错误。更多关于

安全导航操作符的信息

仅通过@adiga添加，任何http调用都是异步调用，因此在呈现模板时需要一段时间，数据尚未从http调用返回。因此，我们使用elvis操作符进行相同操作。您应该优先考虑首先发布的答案

{{data?.elemento}}