异常：错误：未捕获(承诺)：类型错误：无法读取空的属性"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.relelatednews [0]）中未定义，但是对于ngondestroy，我得到了阵列。此外，我可以在模板中使用相同的变量。

    <h1 class="news-header"><span></span> {{selectednews[0]?.title}}</h1>

如上图所示，当使用模板中使用变量时，它可以正常工作。但是每当我尝试在组件中使用它时，我都会得到

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

是异步操作。您需要在回调（subscribe）内使用relatedNews进行操作：

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

Answer 2

将您的console.log（this.RelelatedNews [0]）放入您的服务回调中：

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

通常您的控制台。log将返回您的对象