在html中显示对象

Question

我有一个返回此内容的查询：

在组件中我有这段代码：

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>"}

my page.ts class

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：无法读取未定义ORIGINAL的属性“Title”   STACKTRACE：zone.js：390错误：未捕获（在承诺中）：错误：错误   ./PageComponent类PageComponent - 内联模板：5：40引起：   无法读取未定义的属性'标题'..

出了什么问题？

Answer 1

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

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

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

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

Answer 2

您需要在模板中使用{{1}}。当你异步获取数据时。

{{1}}