JSONデータをAngular 2コンポーネントに読み込みます。

Question

JSON hadaをAngular 2 Componentに読み込もうとしています。

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

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

私のテンプレートのようなある：

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

私の問題は、上記this.datoerですコンポーネント内にあります。 KalenderComponent型には存在しないという。 私は、コンポーネントでこのようにそれを宣言しようとしている：

private datoer: Array<any> = []; 

しかし、それはタイプ 『が観察』 『任意の[]』プロパティ 『長』観察可能「タイプに欠けているを入力する割り当て可能ではない」と述べています。そのため、あなたがしなければならないsubscribeobservableからAngular2 Http class docsによる」。

これを解決する方法任意のアイデア？

Answer 1

HTTPサービス、それが非同期で作られているので、それはだ結果とobservableない配列を返します。あなたがすることができます取得時に配列をフィードしてくださいnotified（これはhttp要求が完了したときに発生します）。例えば

：

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

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