尝试在 Angular2 中以 HTML 格式呈现 JSON

Question

我正在尝试将从后端返回的 JSON 呈现为 HTML {{ object.x }}，我在我的共享服务中使用 BehaviourSubject，我在其中调用了我正在尝试呈现的列表的 API 端点。

public storesChanged = new BehaviorSubject([]);

public getStores(): void {
  this.retrieveResults().subscribe((results) => {
    this.storesChanged.next(results.Results)
      console.log('Name >> ', results.Results[0].Name) // this shows me the Name
  });
}
public retrieveResults(): Observable<any> {
  return this.http.get('/api/Stores/Summary')
  .map(res => res.json())
} 

使用此服务：

this.sharedService.storesChanged.subscribe((res) => {
  this.currentStore = res.find((x) => x.Id === this.storeId)
  // this returns the object based on the Id which should be able to use in my HTML
})

这是我试图在 HTML {{ currentStore.Name }} 中呈现的对象，但它返回错误 Cannot read property 'Name' of undefined。

{
   'Id': 1,
   'Name': 'Eastleigh'
}

我很困惑为什么当属性在对象中时它返回'Name' of undefined。谁能指出原因。

Answer 1

由于你的currentStore对象是异步接收的，你可以像这样使用“elvis”操作符

{{ currentStore?.Name }}

“elvis”或安全导航运算符将检查您的对象是否为空/未定义。并且当它被定义时，angular 将尝试访问您选择的属性（名称）。

来源：https://en.wikipedia.org/wiki/Safe_navigation_operator