Question

我试图调用一个新的端点来显示数据，我意识到在上一组有效的数据中，它在数据周围带有一对额外的[[]]括号，我认为这就是问题是，而新的端点不会以使用数据的方式生成它！

这是NgFor失败的原因：找不到类型为“工业的下一个前沿”的其他支持对象“ [object Object]”。 NgFor仅支持绑定到数组等Iterable。

旧的终结点使用接口来存储数据并仅访问数据，而新的终结点返回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" }] 
]

以类似的方式检索数据，但从端点调用了它然后通过界面访问：

export interface IEngagementSideContentData {

sessionList?: any;
}

  @Input() data: IEngagementSideContentData;

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

这个旧的端点和使用接口的方式意味着要有一个额外的括号，并且ngfor可以工作，任何建议都会非常感谢？

Answer 1

您首先拥有这个：

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

然后在里面找到这个：

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

getSortedSessionList（）返回什么？一连串的会话？（那是额外的[]的来源吗？）

这些ngFor语句中的哪个正在生成错误？

HTML表示使用getSortedSessionsList（）获取会话数组。

然后针对该阵列中的每个会话阵列，以处理每个会话。

我认为您会使用此

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

在此处注意单数session。并非两个*ngFor语句。

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

Answer 2

您应该循环sessionData而不是sessions

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

数组被视为对象，无法使用NgFor

2 个答案: