Angular 4 - ERROR TypeError, ERROR CONTEXT DebugContext_

Question

I'm rookie in Angular 4 and I need some help. My code in console display error but in my template everything display correct. Could someone help me understand what happend?

Error

ERROR TypeError: Cannot read property 'Tytul' of undefined
NewsDetailsComponent.html:7 ERROR CONTEXT DebugContext_ {view: Object, nodeIndex: 12, nodeDef: Object, elDef: Object, elView: Object}

news.ts

export interface News {
Ident: number;
Tytul: string;
Tresc: string;
Data: string;

}

news.service.ts

import { Injectable } from '@angular/core';
import { Http, Response, Headers, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/toPromise';

import { News } from './news';

@Injectable()

export class NewsService {

private newsUrl = 'http://localhost:6128/getnews';
private headers = new Headers({ 'Content-type': 'application/x-www-form-urlencoded' });
private options = new RequestOptions({ headers: this.headers, withCredentials: true });

constructor(private http: Http) {}

getNews(): Promise<News[]> {

    return this.http.get(this.newsUrl, this.options)
        .toPromise()
        .then(response => response.json().data as News[])
        .catch(this.handleError);
}

getOneNews(id: number) {

    const url = `${this.newsUrl}?Ident=${id}`;
    return this.http.get(url, this.options)
        .map(res => res.json());
}       

private handleError(error: any): Promise<any> {

    console.error('An error occurred', error);
    return Promise.reject(error.message || error);
}

}

news-details.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { ActivatedRoute, Params }   from '@angular/router';
import { Location }                 from '@angular/common'; 
import 'rxjs/Rx';
import 'rxjs/add/operator/switchMap';

import { News }                     from './news';
import { NewsService }              from './news.service';

@Component({
selector: 'app-news-details',
templateUrl: './views/news-details.component.html',
providers: [NewsService]
})

export class NewsDetailsComponent implements OnInit  { 

@Input() news: News;

constructor(
    private newsService: NewsService,
    private route: ActivatedRoute,
    private location: Location
) {}

ngOnInit(): void {

    this.route.params
        .switchMap((params: Params) => this.newsService.getOneNews(+params['id']))
        .subscribe(res => this.news = res);
}

goBack(): void {
    this.location.back();
}
}

news-details.component.html

<section class="header-box">
    <button class="header-btn back icon-wroc" (click)="goBack();"></button>
    <div class="header-title">Komunikat</div>
</section>
<section class="content-box">
    <h2>{{ news.Tytul }} </h2>
    <div class="content-content" [innerHTML]="news.Tresc"></div>
</section>

Answer 1

You are doing request to service which probably get data from the server. The problem is simple that while you are doing request to server your object is null but view is already generated you have two options First

 <h2>{{ news?.Tytul }} </h2>

Second

<section class="content-box" *ngIf="news">
    <h2>{{ news.Tytul }} </h2>
    <div class="content-content" [innerHTML]="news.Tresc"></div>
</section>

Fist option will generate empty h1 and div, second option will not generate anything untill news is not null