Angular 5 HTTP Observable获取请求句柄嵌套对象

我的angular应用程序有问题

我根据jsonapi.org的指导原则创建了一个api，因此我的api看起来如下所示：

{
  "data": [
    {
      "type": "posts",
      "id": "1",
      "attributes": {
        "text": "Hello, World!"
      },
      "relationships": {
        "user": {
          "data": {
            "type": "users",
            "id": "1"
          },
          "links": {
            "self": "http://localhost/api/users/1"
          }
        },
        "comments": [

        ]
      },
      "links": {
        "self": "http://localhost/api/posts/1"
      }
    }
  ],
  "links": {
    "first": "http://localhost/api/posts?page=1",
    "last": "http://localhost/api/posts?page=1",
    "prev": null,
    "next": null,
    "self": "http://localhost/api/posts"
  },
  "meta": {
    "current_page": 1,
    "from": 1,
    "last_page": 1,
    "path": "http://localhost/api/posts",
    "per_page": 15,
    "to": 1,
    "total": 1
  },
  "included": [
    {
      "type": "users",
      "id": "1"
    }
  ]
}

/** GET heroes from the server */
  getPosts (): Observable<Post[]> {
    return this.http.get<Post[]>(this.postsUrl)
      .pipe(
        tap(posts => this.log(`fetched posts`)),
        catchError(this.handleError('getPosts', []))
      );
  }

现在我正试图在angular 5应用程序中实现api。目前，我获取的数据如下所示：

{
  "data": [
    {
      "type": "posts",
      "id": "1",
      "attributes": {
        "text": "Hello, World!"
      },
      "relationships": {
        "user": {
          "data": {
            "type": "users",
            "id": "1"
          },
          "links": {
            "self": "http://localhost/api/users/1"
          }
        },
        "comments": [

        ]
      },
      "links": {
        "self": "http://localhost/api/posts/1"
      }
    }
  ],
  "links": {
    "first": "http://localhost/api/posts?page=1",
    "last": "http://localhost/api/posts?page=1",
    "prev": null,
    "next": null,
    "self": "http://localhost/api/posts"
  },
  "meta": {
    "current_page": 1,
    "from": 1,
    "last_page": 1,
    "path": "http://localhost/api/posts",
    "per_page": 15,
    "to": 1,
    "total": 1
  },
  "included": [
    {
      "type": "users",
      "id": "1"
    }
  ]
}

/** GET heroes from the server */
  getPosts (): Observable<Post[]> {
    return this.http.get<Post[]>(this.postsUrl)
      .pipe(
        tap(posts => this.log(`fetched posts`)),
        catchError(this.handleError('getPosts', []))
      );
  }

/**从服务器获取英雄*/
getPosts（）：可观察的{
返回this.http.get（this.postsUrl）
.烟斗(
轻触（posts=>this.log（`fetched posts`）），
catchError（this.handleError（'getPosts'，[]））
);
}

现在的问题是，如何才能正确地获取对象？因为angular希望对象在api的根目录中作为数组，但Mine在“data”下

---

刚刚找到函数“mergeMap”，但它没有按预期工作，因此我仍然存在相同的问题。

如果您只是想从服务中返回

数据属性的内容，您可以使用
映射
：

getPosts(): Observable<Post[]> {
    this.http.get(this.postsurl)
            .map(resp => resp.json())
            .map(body => body.data);
}

getPosts（）：可观察{
this.http.get（this.postsurl）
.map（resp=>resp.json（））
.map（body=>body.data）；
}

如果您需要对元素进行处理以将其转换为特定的对象类型，那么您也可以在map函数中进行处理。
点击
tap
块中的
console.log（posts）
给您提供了什么？您是否可以使用observables.map”函数并返回posts.data如果您需要result.data，您可以使用map。映射转换结果（属性为“data”、“links”、“meta”的对象）的方法：返回this.http.get（this.postrl）.pipe（映射（result=>{return result.data}）哈哈哈我自己刚刚找到了它。不过还是要谢谢你！它正在工作。