Angular 为什么这个 HTTP 请求响应数组的长度未定义？

Question

我正在尝试获取包含客户可以加入的大厅信息的数据。 我从 springboot API 获得这些数据。 对于要在我的 angular 前端中显示的数据，我将结果添加到作为组件属性的 Set 中。 但是在从 API 获取这些数据并将其映射到 object 数组后，我无法遍历结果。 这一切都是因为数组的长度据说是未定义的。

我正在使用最新版本的 Angular（当前为 7）并且已经尝试过 map JSON 响应与 Z9518ZDC8ED512445 方法不同。 而不是使用订阅 function。 直接将响应分配给另一个数组也会给出此错误：LobbyComponent.html:10 错误错误：找不到支持“对象”类型的 object“[对象对象]”的不同对象。 NgFor 仅支持绑定到 Iterables，例如 Arrays。

组件

export class LobbyComponent implements OnInit {

  lobbies: Set<Lobby>;
  constructor(private lobbyService: LobbyService) { }

  getLobbies(): void {
    this.lobbyService.getLobbies().subscribe(response => {

      console.log(response);


      // This solutions give this error: ERROR TypeError: response.forEach is not a function
      // response.forEach(element => console.log(element.id)) 

      //Todo: fix response.length is undifenided
      console.log(response.length)
      for (var i = 0; i < response.length; i++) {
        console.log(i);
        this.lobbies.add(response[i])
      }
    })
      ;
  }

服务

getLobbies(): Observable<Lobby[]> {
    return this.http.get<Lobby[]>(this.apiURL+"/lobbies").pipe(
      tap(_ => this.log(`Got lobbies`)),
      catchError(this.handleError<Lobby[]>('getLobbies', []))
    );
  }

大厅 Class

export class Lobby{
    id: string;
    slots: User[]
}

JSON 结果来自 API

"lobbies": [
        {
            "users": null,
            "id": "Another Lobby!"
        },
        {
            "users": null,
            "id": "This is a Lobby!"
        }
    ]

我希望代码循环遍历结果并将它们添加到组件中的集合中。 但由于长度未定义，它不会遍历响应元素。 并尝试使用 forEach 而不是 for 循环会出现此错误： ERROR TypeError: response.forEach is not a function

Answer 1

您的 API 不返回数组，而是返回包含数组的 object。 所以你应该

getLobbies(): Observable<Lobby[]> {
// find a neat name for T, it'll be an object containing a property `lobbies` of type Lobby[]
    return this.http.get<T>(this.apiURL+"/lobbies").pipe(
      tap(_ => this.log(`Got lobbies`)),
      catchError(/* error handling logic here */),
      map(({ lobbies }) => lobbies),
    );
  }