Angular 4 - 錯誤類型錯誤，錯誤上下文DebugContext_

我是Angular 4的新手，我需要一些幫助。我的代碼在控制檯顯示錯誤，但在我的模板中顯示正確。有人能幫我理解發生了什麼嗎？Angular 4 - 錯誤類型錯誤，錯誤上下文DebugContext_

錯誤

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); 
} 

}

新聞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(); 
} 
}

新聞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>

來源

2017-07-03 rafalrafal

什麼是您的服務器的輸出？ –

對不起，但我不明白你的問題？你需要什麼信息？我的響應表格服務器是：「{」Ident「：1，」Data「：」1899-12-30T00：00：00.0 + 23：00「，」Tytul「：」Nowy towardostępny「，」Tresc「：」

Nowy towar jestjużdostepny w sklepie。Zapraszamy do kupna。

「}' – rafalrafal

你正在做的請求服務，這可能是從服務器獲取數據。問題很簡單，當你正在做的請求，服務器的對象爲空，但已生成的視圖，你有兩個選擇首先

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

二

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

拳選項將產生空h1和股利，第二個選項將不會產生任何東西，直到消息不爲空

來源

2017-07-03 06:56:11

完美的作品。謝謝老兄。 – rafalrafal

@rafalrafal完美:)永遠記得比角將失敗，如果對象爲空:)在angulajs這不是一個問題 –

我會再次:) thx！ – rafalrafal

Angular 4 - 錯誤類型錯誤，錯誤上下文DebugContext_

回答

相關問題