web-dev-qa-db-ja.com

Angular 4-ERROR TypeError、ERROR CONTEXT DebugContext_

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

おそらくサーバーからデータを取得するサービスへのリクエストを行っています。問題は単純です。サーバーへのリクエストを行っている間、オブジェクトはnullですが、ビューがすでに生成されているため、2つのオプションがあります。

 <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を生成し、2番目のオプションはnewsがnullになるまで何も生成しません

24
Volodymyr Bilyachat