Question

我的角度应用程序出了问题。

我已经使用 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"
    }
  ]
}

现在我正在尝试将api应用到我的angular 5应用程序中。目前我获取这样的数据：

/** 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希望对象在api的根目录中作为数组，但是地雷位于数据之下。

刚刚找到函数＆＃39; mergeMap＆＃39;但它没有按预期工作，所以我仍然存在同样的问题。

Answer 1

如果您只想从服务中返回data媒体资源的内容，可以使用map：

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

如果您需要处理元素以将它们转换为特定的对象类型，那么您也可以在map函数中执行此操作。

Angular 5 HTTP Observable GET Request处理嵌套对象

1 个答案: