时间戳

首页 > 解决方案 > 使用 Angular 9 从后端获取数据数组

angular - 使用 Angular 9 从后端获取数据数组

问题描述

我需要一些关于 Angular (9) 的帮助。我执行 GET 请求以从后端获取用户列表：

    getUsers() {
    return this.http.get<User[]>(`${this._constant.baseAppUrl}/users/all`, )
        .pipe(map(user => {

            return user;
        }));
    }

我的目标是获取具有用户模型类型的对象数组。相反，我得到一个对象。

在此处输入图像描述

我不明白为什么。我的 IDE 还显示，用户变量是 User[]，但在浏览器中，用户类型是“对象”。

那么我怎样才能得到一个数组呢？

编辑：这是来自后端的答案：

{
   "5ea04cfbcd595b393d78acbb": {
      "isAdmin": true,
      "role": "User",
      "status": "cEmail",
      "_id": "5ea04cfbcd595b393d78acbb",
      "name": "Test",
      "password": "$2b$10$re0gqblgXsfYus1mYA3yQ.Oiz4x81c3M2uxfE4tG6V7tNW1JMubXi",
      "email": "dr@rootix.de",
      "__v": 0
   },
   "5ea1f308fc8909618668384e": {
      "isAdmin": true,
      "role": "User",
      "status": "cEmail",
      "_id": "5ea1f308fc8909618668384e",
      "name": "Mathias Braun",
      "password": "$2b$10$zpQezfiG4xNkwOTgV4CLIeYU4MITVfL2VhlLC3rqCbjBGl5TIpavG",
      "email": "mb@rootix.de",
      "__v": 0
   }
}

标签： angular

解决方案

后端没有根据您提供的 JSON 返回数组。但是您可以使用以下方式将对象转换为 Angular 端的 Array。

修改你的 Api 调用函数

getUsers():Observable<User[]> {
   return this.http.get<User[]>(`${this._constant.baseAppUrl}/users/all`, )
    .pipe(map(response=> {
       if(response){
          return Object.values(response); //This will return the array of object values.
        }
        return []; // If response is null return empty array for safety.
    }));
}

现在您的 getUsers() 函数将包含用户对象数组。

推荐阅读