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> = []; 

그러나 그것은 유형 '은 관찰 가능한' '어떤 []'속성 '길이'관찰 가능한 '유형에 없습니다를 입력 할당 할 수없는 "고 말했다. '.

이

Answer 1

HTTP 서비스가 Angular2 Http class docs에 따르면,이 비동기 적으로 만들어 있기 때문에 그건, 결과와 함께 observable하지 배열을 반환

모든 아이디어를 어떻게이 문제를 해결하는 방법?. 따라서 당신이해야 observable-subscribe 그래서 당신이 할 수있는가 도착하면 배열에 피드하십시오.(http 요청이 완료되면 발생합니다). 예를 들어

:

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

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