Angular2観測可能なHTTPデータが埋め込まれていない

Question

Angular2が新しく、JSONファイルからデータをロードしたい。 AngularIO Articleを読んでチュートリアルをやったが、まだ助けが必要だ。 データを取得するapiServiceと、apiServiceからデータを取得するコンポーネントに「取得するデータ」を分割しました。

この質問のために、私はapiServiceなしでコンポーネントに直接データをロードしたいと思っています。

これはコンポーネントです：

export class StatusComponent implements OnInit { 

    private status = {}; 
    private error: string; 

    constructor(private router: Router, private variables: Variables, private apiService: ApiService, private http: Http) { 
     if (!this.variables.getIsLoggedIn()) { 
      this.router.navigate(['login']); 
     } 
    } 

    ngOnInit() { 
     this.getStatus(); 
    } 

    getStatus() { 
     this.http.get('../app/apiFiles/status.json') 
     .map((res:Response) => res.json()) 
     .subscribe(
     data => { this.status = data}, 
     err => console.error(err), 
     () => console.log('done') 
    ); 
     console.log(JSON.stringify(this.status)); 
    } 
} 

これはJSONです：コンポーネントで

{ 
    "status": { 
    "timercount": "0", 
    "reccount": "0" 
    } 
} 

、getStatus()が正しくロード、およびエラーなしに経由ですが、変数iがstatusを埋めます満たされていません。 の後に変数はまだ{}です。 さらに、console.log(JSON.stringify(this.status));の出力は{}です。

誰かが私を助けて解決することを願っています！ ありがとう！

Answer 1

httpコールが完了してからconsole.log(JSON.stringify(this.status));が実行されるためです。すべてのhttp呼び出しがの非同期メソッドであることに注意してください。これを試してみてください：

getStatus() { 
    this.http.get('../app/apiFiles/status.json') 
    .map((res:Response) => res.json()) 
    .subscribe(
    data => { this.status = data}, 
    err => console.error(err), 
    () => console.log(this.status); 
); 
} 

HTTP呼び出しがsuccessfuly完了した後に() => console.log(this.status);が実行されているので、これはあなたの結果を印刷します表示されます。

Answer 2

正解はこれです：

ので

getStatus() { 
     this.http.get('../app/apiFiles/status.json') 
     .map((res:Response) => res.json()) 
     .subscribe(
     data => { this.status = data.status}, 
     err => console.error(err), 
     () => console.log('done') 
    ); 
     console.log(JSON.stringify(this.status)); 
    } 

JSONファイルには、「ステータス」で始まるので、あなたは、data.statusを使用する必要があります。）