ライフクラスのフックでサブスクリプション可観測後にクラス変数が定義されていません

Question

コンポーネントクラスに変数（jsonオブジェクト）を設定しようとしています。観測可能なサービスに加入し、コンポーネント変数を設定するngOnInit。 私はコンポーネントテンプレートにドット表記で、この変数にアクセスしようとすると、私はこのエラーを取得：

Cannot read property 'count_runs' of undefined

、観察が型注釈（avgTime Interface）を持っています。また

平均-time.ts

export interface AvgTime { 
    avg_runtime_millis: number; 
    count_runs: number; 
} 

stats.service.ts

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { AvgTime } from './avg-time'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class StatsService { 
    constructor(private _http: Http) { } 

    private _avgTimeUrl = 'http://localhost:3002/api/reservation/avgTime'; 

    getAvgTime() : Observable<AvgTime> { 
    return this._http.get(this._avgTimeUrl) 
       .map(res => res.json()); 
    } 
} 

平均-time.component.ts

import {Component, OnInit} from '@angular/core'; 
import { AvgTime } from './avg-time'; 
import { StatsService } from './stats.service'; 

@Component({ 
    selector: 'avg-time', 
    template: ` 
    <h1>AvgTimeComponent</h1> 
    {{avgTime.count_runs}} 
    `, 
    providers: [StatsService] 
}) 
export class AvgTimeComponent implements OnInit { 
    avgTime: AvgTime; 

    constructor(private _statsService: StatsService) { } 

    ngOnInit() { 
    this._statsService.getAvgTime() 
     .subscribe(avgTime => this.avgTime = avgTime); 
    } 
} 

が動作していないとき、私は偽物ngOnInitのサービス応答は次のようになります。

平均-time.component.ts

ngOnInit() { 
    this._statsService.getAvgTime() 
     .subscribe(avgTime => { 
      this.avgTime = { 
      avg_runtime_millis: 150, 
      count_runs: 20 
      }; 
     }); 
    } 

バックエンドからの私のstats.service.tsの戻り値は以下のとおりです。

[{"AVG_RUNTIME_MILLIS":55,"COUNT_RUNS":5400}] 

Answer 1

あなたはエルビス演算子を活用する必要があります。

{{avgTime?.count_runs}} 

avgTimeは非同期に設定されており、最初は未定義です...