json - Angular 4 - 错误类型错误，错误上下文 DebugContext_

Question

我是 Angular 4 的新手，我需要一些帮助。我在控制台中的代码显示错误，但在我的模板中一切都显示正确。有人可以帮助我了解发生了什么吗？

错误

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

您正在请求可能从服务器获取数据的服务。问题很简单，当您向服务器发出请求时，您的对象为空，但 View 已经生成，您有两个选择首先

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

第二

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

第一个选项将生成空的 h1 和 div，第二个选项将不会生成任何内容，直到新闻不为空