AUSNAHME: Fehler: Uncaught (in Versprechen): TypeError: Kann Eigenschaft '0' von null keine Vorschläge lesen bitte?

Question

Ich stehe vor diesem Problem, seit ich anfing, eckig2 zu lernen. 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(); 
    } 
    } 

Das Problem ist, dass wenn ich versuche, einen Dienst wie die oben eine verwenden, in jedem meiner Komponente wie News-Komponente, ich habe undefiniert in der Konsole für console.log (this.relatedNews [0]) in ngOnInit, aber für console.log (this.relatedNews [0]) in ngOnDestroy habe ich das Array bekommen. Außerdem kann ich dieselbe Variable in meiner Vorlage verwenden.

Es funktionierte gut, wenn Sie die Variable in der Vorlage wie oben gezeigt verwenden. aber wenn ich versuche, es in der Komponente zu verwenden, habe ich

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

ist ein asynchroner Betrieb. Sie benötigen Operationen mit relatedNews innerhalb der Callback (subscribe) wie dies zu tun:

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

Answer 2

Setzen Sie Ihre console.log (this.relatedNews [0]) innerhalb des Rückrufs des Service wie folgt aus:

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

normalerweise Ihre console.log wird Ihr Objekt