javascript - 以html显示对象

我有一个查询，它返回此：



在组件中，我有以下代码：

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由以下原因引起：无法读取未定义的属性“标题”
  TypeError：无法读取未定义原始内容的属性“ Title”
  堆栈跟踪：zone.js：390错误：未捕获（按承诺）：错误：错误
  ./PageComponent类PageComponent-内联模板：5：40由以下原因引起：
  无法读取未定义的属性“标题”。


怎么了？

最佳答案

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

您可以使用elvis运算符来防止该错误：

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

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