javascript - 数组被视为对象，无法 NgFor

Question

我正在尝试调用一个新端点来显示数据，我意识到在上一组有效的数据中，它在数据周围用一对额外的“[]”括号进行控制台，我认为这就是问题是，而新端点不会以我使用数据的方式产生它!

这是 NgFor 失败的原因:找不到“行业下一个前沿”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定(bind)到 Iterables，例如数组。

旧端点使用接口(interface)来存储数据并仅访问该数据，而新端点返回 json 并尝试将其存储在数组中，然后由 ngfor 使用。

我将首先显示 html 代码:

    <div *ngFor="let sessions of getSortedSessionList()">
  <tl-title
    *ngIf="sessions[0]"
    [title]="getSessionDay(sessions[0].startDatetime)"
    [explore]="true">
  </tl-title>
  <div *ngFor="let session of sessions">
    <tl-session-card
      [title]="session.name"
      [startTime]="getSessionTime(session.startDatetime, true)"
      [endTime]="getSessionTime(session.endDatetime, false)"
      [location]="getLocation(session.location)"
      [path]="sessionPath(session.id, session.name)">
    </tl-session-card>
  </div>
</div>

我认为新端点可能无法工作的原因是它在某种程度上没有摆脱某处的对象括号:

端点(engagementService):

 public sessionData: any[];

 this.sessions(n.id)
        .subscribe(data => {
          this.sessionData = data;
      }

然后当我使用其他文件中的数据时:

  sessionList: any[];

          this.sessionList = this.engagementService.sessionData;

  getSortedSessionList() {


console.log('consoling within getSortedSessionList' + JSON.stringify(this.sessionList))
return this.sessionList;

}

数据返回如下:

[{
    "id": "a0Wb0000006RoHwEAK",
    "endDatetime": "2017-01-19T18:00:00.000+0000",
    "location": "Davos-Klosters, Congress Centre, Sanada",
    "name": "Industry's Next Frontier",
    "photoURL": "https://fwsqa.weforum.org/images/sessions/a0Wb0000006RoHwEAK/standard"
}]

然而，有效的原始端点返回的数据如下:(我认为附加的“[]”是有区别的!)

[
[{
        "id": "a0Wb0000006RqNlEAK",
        "endDatetime": "2017-01-20T09:15:00.000+0000",
        "location": "Davos-Klosters, Congress Centre, xChange",
        "name": "Fertile Ground for Sustainable Growth",
        "photoURL": "https://fwsqa.weforum.org/images/sessions/a0Wb0000006RqNlEAK/standard",
        "roles": null,
        "startDatetime": "2017-01-20T08:00:00.000+0000",
        "thumbnailURL" }] 
]

数据以类似的方式检索，但它是从端点调用的然后通过接口(interface)访问:

export interface IEngagementSideContentData {

sessionList?: any;
}

  @Input() data: IEngagementSideContentData;

  getSortedSessionList() {
if (!this.sessionList) {
  this.sessionList = this.data.sessionList.sort(this.dateSort);
}

不知何故，这个旧端点和接口(interface)的使用意味着有一个额外的括号并且 ngfor 可以工作，任何建议都会很好，谢谢？

Answer 1

你首先有这个:

<div *ngFor="let sessions of getSortedSessionList()">

然后在里面你有这个:

<div *ngFor="let session of sessions">

getSortedSessionList() 返回什么？ session 数组的数组？ (这就是额外的 [] 的来源？)

以下哪一个 ngFor 语句生成了错误？

HTML 表示使用 getSortedSessionsList() 获取 session 数组的数组

然后针对该数组中的每个 session 数组，处理每个 session 。

我认为你会使用这个

<div *ngFor="let session of getSortedSessionList()">

注意这里的单数 session 。不是两个 *ngFor 语句。

但我不确定我是否理解您的要求。