Angular2无法绑定到子数组答案

【问题标题】：Angular2 Cannot bind to child arrayAngular2无法绑定到子数组
【发布时间】：2016-10-23 02:15:01
【问题描述】：

我有一个 JSON 对象，如下所示：

{
  "sessions": [
    {
      "title": Session Title,
      "room": "Ballroom A"
    },
    {
      "title": Session Title #2,
      "room": "Ballroom B"
    }
  ],
  "speakers": [
    {
      "name": John Doe,
      "twitter": "jdoe"
    },
    {
      "name": John Smith,
      "twitter": "jsmith"
    }
  ]
}

我正在尝试绑定到对象的会话子项。完整的对象在一个名为 conferenceData 的变量中，我用来显示标题的代码是：

<div *ngFor="#session of conferenceData.sessions">{{session.title}}</div>

当我这样做时，我收到错误：TypeError：无法读取 [conferenceData.sessions in ProductListComponent@65:17] 中未定义的属性“会话”

如果我将孩子分配给一个变量：

this.sessionData = this.conferenceData.sessions;

然后绑定到 sessionData 变量，它按预期工作。这是使用 TypeScript 和 Angular 2。我想这可能是 TypeScript 的类型问题，但我认为此时它都是 JavaScript。任何帮助，将不胜感激。

谢谢！

【问题讨论】：

你如何检索conferenceData？

标签： binding typescript angular ngfor

【解决方案1】：

这可能是因为 this.conferenceData 尚未分配，此时 Angular 第一次渲染您的视图。

您可以使用 elvis 运算符轻松解决此问题：

<div *ngFor="#session of conferenceData?.sessions">{{session.title}}</div>

【讨论】：

【解决方案2】：

问题是获取json数据的时间，组件在角度渲染视图时没有数据。 solution 是使用 'elvis' (?) 运算符来确保数据准备就绪： - <div *ngFor="#session of conferenceData?.sessions"> {{session.title}} </div> 第二种解决方案是隐藏 ngFor，直到conferenceData 准备就绪： <div *ngIf="conferenceData"> <div *ngFor="#session of conferenceData.sessions"> {{session.title}} </div> </div>

【讨论】：