Angular 4 - ERROR TypeError, ERROR CONTEXT DebugContext_

Question

I am new to Angular 4 and I need help. My code is displayed in the console, but everything is displayed correctly in my template. Can someone help me understand what happened?

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 fulfilling a service request, which is likely to receive data from the server. The problem is simple in that while you are executing a server request, your object is null, but the 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> 

The Fist option will generate empty h1 and div, the second option will not generate anything until the news is null