web-dev-qa-db-fra.com

Angular 4 - ERREUR TypeError, ERREUR CONTEXTE DebugContext_

Je suis débutant dans Angular 4 et j'ai besoin d'aide. Mon code dans la console affiche une erreur mais dans mon modèle tout s'affiche correctement. Quelqu'un pourrait-il m'aider à comprendre ce qui s'est passé?

Erreur

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>
jsonangulartypescriptobservable
15
rafalrafal

Vous faites une demande de service qui obtient probablement des données du serveur. Le problème est simple: pendant que vous faites une demande au serveur, votre objet est nul mais la vue est déjà générée, vous avez deux options

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

Seconde

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

La première option générera h1 et div vides, la deuxième option ne générera rien jusqu'à ce que les nouvelles ne soient pas nulles

24
Volodymyr Bilyachat