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

Posted 2023-03-13

【中文标题】Angular 4 - 错误类型错误，错误上下文 DebugContext_

【英文标题】：Angular 4 - ERROR TypeError, ERROR CONTEXT DebugContext_

【发布时间】：2017-12-06 08:09:52

【问题描述】：

我是 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>

【问题讨论】：

你服务器的输出是什么？

对不起，我不明白你的问题？你需要什么信息？我的回复表单服务器是："Ident": 1, "Data": "1899-12-30T00:00:00.0+23:00", "Tytul": "Nowy towar dostępny", "Tresc": "<p><span style=\"font-family: Calibri;font-size: 11pt;\">Nowy towar jest już dostepny w sklepie. Zapraszamy do kupna.</span></p>"

【参考方案1】：

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

 <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，第二个选项不会生成任何东西，直到新闻不为空

【讨论】：

@rafalrafal perfect :) 永远记住，如果对象为空，角度会失败 :) 在 angulajs 中这不是问题

我迟到了，但这很常见吗？我觉得这样做的时候想作弊......哈哈