将JSON数据加载到Angular 2组件中

我正在尝试将JSON hada加载到Angular 2组件中，我想我已经找到了方法

datoer.service.ts：

import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class DatoService { 

    dato: Array<any>;

    constructor(private http: Http) {}

        getDato() {
            return this.http.request('./datoer.json')
                 .map(res => res.json());
        }   
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
从“rxjs/Observable”导入{Observable}；
@可注射（）
导出类DatoService{
dato：阵列；
构造函数（私有http:http）{}
getDato（）{
返回此.http.request（'./datoer.json'）
.map（res=>res.json（））；
}   
}

kalender.component.ts：

import { Component } from '@angular/core';
import { ValgteSkolerService } from '../valgteSkoler.service';
import { DatoService } from './datoer.service';

@Component({
    selector: 'kalender',
    providers: [DatoService],
    templateUrl: 'app/kalendervisning/html/kalender.html'
})
export class KalenderComponent {

    private valgteSkoleRuter: Array<any>= [];
    //private datoer: Array<any> = [];

    constructor(private valgteSkolerService: ValgteSkolerService, private DatoService: DatoService) {
        this.datoer = this.DatoService.getDato();
    }

    ngOnInit() {
      this.valgteSkolerService.hentLagretData();
      this.valgteSkoleRuter = this.valgteSkolerService.delteValgteSkoleRuter;
    }

从'@angular/core'导入{Component}；
从“../valgteSkoler.service”导入{ValgteSkolerService}；
从“/datoer.service”导入{DatoService}；
@组成部分({
选择器：“kalender”，
提供者：[数据服务]，
templateUrl:'app/kalendervisning/html/kalender.html'
})
导出类KalenderComponent{
私有valgteSkoleRuter:Array=[]；
//私有数据源：数组=[]；
构造函数（专用valgteSkolerService:valgteSkolerService，专用DatoService:DatoService）{
this.datoer=this.DatoService.getDato（）；
}
恩戈尼尼特（）{
this.valgteSkolerService.hentLagretData（）；
this.valgteSkoleRuter=this.valgteSkolerService.delteValgteSkoleRuter；
}

我的模板如下所示：

<p *ngFor="let dato of datoer"> {{dato}}  </p>

{{dato}

我的问题是组件中上面的this.datoer。它说它在KalenderComponent类型上不存在。 我曾尝试在组件中这样声明：

private datoer: Array<any> = [];

private-datoer:Array=[]；

但是它说“类型'Observable'不可分配给类型'any[]”。属性'length'在类型'Observable'中丢失

---

有什么办法可以解决这个问题吗？

根据，http服务返回一个

可观察的

而不是一个带有结果的数组，这是因为它是异步生成的。因此，您必须

订阅
可观察的
，这样您就可以在数组收到
通知时为它提供数据（http请求完成时会发生这种情况）

例如：

public datoer: any[] = [];    
constructor(
    private valgteSkolerService: ValgteSkolerService,
    private DatoService: DatoService) {

    this.DatoService
        .getDato()
        .subscribe(datoer => { this.datoer = datoer; });    
}

根据，http服务返回一个
可观察的
而不是一个带有结果的数组，这是因为它是异步生成的。因此，您必须
订阅
可观察的
，以便在数组收到
通知时可以为其提供数据（这发生在http请求完成时）

例如：

public datoer: any[] = [];    
constructor(
    private valgteSkolerService: ValgteSkolerService,
    private DatoService: DatoService) {

    this.DatoService
        .getDato()
        .subscribe(datoer => { this.datoer = datoer; });    
}

“GET 404（Not Found）”。有什么问题吗？@MariusJ您的url可能错误或键入错误，甚至文件不存在。但这与可观察的内容无关，而是与HTTP请求有关。@MariusJ，您解决了吗？我只有一个问题；cell.id=this.datoer[this.j].dato；不起作用。无法读取未定义…@MariusJ的属性dato。您从何处调用它？在组件类上？能否在您的问题上添加这段代码？“GET 404（未找到）“.MariusJ可能有什么问题？@MariusJ您的url可能有错误或键入错误，甚至文件不存在。但这与可观察内容无关，而是与HTTP请求有关。@MariusJ，您解决了吗？我只有一个问题；cell.id=this.datoer[this.j].dato；不工作。无法读取未定义…@MariusJ的属性dato。您从何处调用它？在组件类上？您可以在您的问题上添加这段代码吗？