binding - Angular2无法绑定到子数组

Question

我有一个 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: Cannot read property 'sessions' of undefined in [conferenceData.sessions in ProductListComponent@65:17]

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

this.sessionData = this.conferenceData.sessions;

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

谢谢！

Answer 1

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

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

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

Answer 2

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