Angular 4 - Fehler TypError, Fehler Kontext DebugContext_

Question

Ich bin Anfänger in Angular 4 und ich brauche etwas Hilfe. Mein Code in der Konsole Anzeige Fehler, aber in meiner Vorlage alles korrekt angezeigt. Könnte mir jemand helfen zu verstehen, was passiert ist?

Fehler

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

Sie tun Anfrage an Service, der wahrscheinlich Daten vom Server erhalten. Das Problem ist einfach, dass, während Sie Anforderung an den Server tun Ihr Objekt ist null, aber Ansicht ist bereits erzeugt haben Sie zwei Möglichkeiten Erste

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

Zweite

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

Faust Option leer h1 erzeugen und div, zweite Option erzeugt nichts, bis news nicht null ist