在html中显示对象答案

【问题标题】：display object in html在html中显示对象
【发布时间】：2016-12-13 14:26:15
【问题描述】：

我有一个查询返回：

在组件中我有这个代码：

pages: Page[];

constructor(private httpCall: HttpCall) { }

ngOnInit() {
    this.httpCall.get('/pub/page/GetPageById')
        .subscribe(
        data => {
            this.pages = <Page[]>data
            console.log(data);
            console.log(this.pages);
        })
}

HttpCall 是我的有效服务。

它记录了这个：

Object {Id: 6, Title: "asdasd", Content: "<p>asdasd</p>"}
Object {Id: 6, Title: "asdasd", Content: "<p>asdasd</p>"}

我的 page.ts 类

export class Page {
    constructor(
        private Id: number,
        private Title: string,
        private Content: string
    ) { }
}

当我写这个时在 html 中：

 <h4 class="block-title">{{ pages.Title }}</h4>

 <div class="about-project">
     <p>{{ pages.Content }}</p>
 </div>

但它不会显示我的数据，而是记录以下错误：

错误：./PageComponent 类 PageComponent 中的错误 - 内联模板：5:40 原因：无法读取未定义的属性“标题” 类型错误：无法读取未定义原件的属性“标题” STACKTRACE: zone.js:390Error: Uncaught (in promise): Error: Error in ./PageComponent 类 PageComponent - 内联模板：5:40 引起：无法读取未定义的属性“标题”..

怎么了？

【问题讨论】：

标签： javascript angular

【解决方案1】：

当您异步获取数据时，您的 pages 变量将首先是 undefined。

您可以使用 elvis operator 来防止该错误：

<h4 class="block-title">{{ pages?.Title }}</h4>

<div class="about-project">
  <p>{{ pages?.Content }}</p>
</div>

【讨论】：

【解决方案2】：

您需要在模板中使用*ngIf。当您异步获取数据时。

<div *ngIf="pages"> 
  <h4 class="block-title">{{ pages.Title }}</h4>

  <div class="about-project">
    <p>{{ pages.Content }}</p>
  </div>
</div>

【讨论】：