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

我正在尝试绑定到对象的sessions子节点。完整对象位于名为conferenceData的变量中，我用来显示标题的代码是：

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

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

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

this.sessionData = this.conferenceData.sessions;

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

谢谢！

Answer 1

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

您可以使用elvis操作员轻松解决此问题：

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

Answer 2

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

Angular2无法绑定到子数组

2 个答案: