例外：エラー：キャッチされていない（約束しています）：TypeError：nullのプロパティ '0'を読み込めません。

Question

私はangular2を学び始めてからこの問題に直面しています。 news.service

@Injectable() 
    export class NewsServices { 
    private news: News[] = []; 

    constructor(private _http: Http) {} 

    getSingleNews(id: string): Observable <SingleNews[]> { 
     return this._http.get(`http://watania.info/getNewsById/${id}`) 
      .map((response: Response) => response.json()); 
    } 
    export interface SpecialNews { 
    id: string; 
    title: string; 
    url_title: string; 
    image: string; 
    category: string; 
    summary: string; 
    date_to_publish: string; 
    } 

news.component.ts

import { ActivatedRoute, Router } from '@angular/router'; 
    import { Component, OnDestroy, OnInit } from '@angular/core'; 
    import { NewsServices, SingleNews } from '../../services/news.services'; 

    import { News } from './../../services/news.services'; 
    import { Subscription } from 'rxjs/Rx'; 
    import { VideosPage } from './../../services/videos.service'; 

    @Component({ 
    selector: 'wn-single-news', 
    templateUrl: './single-news.component.html', 
    styleUrls: ['./single-news.component.css'] 
    }) 
    export class SingleNewsComponent implements OnInit, OnDestroy { 
    sub: Subscription; 
    private selectednews: SingleNews[]= []; 
    private relatedNews: News[]= []; 

    constructor(private _newsService: NewsServices, 
      private route: ActivatedRoute) {} 

    ngOnInit(): void { 
    this.sub = this.route.params.subscribe(params => { 
    let id = params['id']; 
    this._newsService.getSingleNews(id).subscribe(
    selectednews => this.selectednews = selectednews); 

    this._newsService.getRelatedNews(id).subscribe(
     relatedNews => this.relatedNews = relatedNews); 
    }); 
    console.log(this.relatedNews[0]) 
    } 

    ngOnDestroy() { 
    console.log(this.relatedNews[0])  
    this.sub.unsubscribe(); 
    } 
    } 

問題は、私はニュースの部品のような私のコンポーネントのいずれにおいても、上記のような任意のサービスを使用しようとすると、私が得たということですngOnInitのconsole.log（this.relatedNews [0]）のコンソールでは定義されていませんが、ngOnDestroyのconsole.log（this.relatedNews [0]）には配列があります。さらに、テンプレート内で同じ変数を使用することができます。

上記のようにテンプレートで変数を使用するとうまくいきました。私は

EXCEPTION: Error: Uncaught (in promise): TypeError: Cannot read property '0' of null 
    any suggestion please? 

Answer 1

this._newsService.getRelatedNews(id).subscribe(
     relatedNews => this.relatedNews = relatedNews); 
    }); 

を得たコンポーネントでそれを使用しようとするたびなく、非同期操作です。

this._newsService.getRelatedNews(id).subscribe(
     (relatedNews) => { 
      this.relatedNews = relatedNews; 
      console.log(this.relatedNews[0]); 
    }); 

Answer 2

このようなあなたのサービスのコールバックの内側（this.relatedNews [0]）あなたはconsole.logを入れて：

this._newsService.getRelatedNews(id).subscribe(
    relatedNews => this.relatedNews = relatedNews); 
    console.log(this.relatedNews[0]) 
}); 

次のようなコールバック（ subscribe）内 relatedNewsを使用して操作を行う必要があります

あなたのconsole.logはあなたのオブジェクトを返します