Angular

Question

我正在开发一个 Angular 应用程序，它需要从 Wordpress REST API 获取帖子及其各自的标签名称。使用 API 需要向服务器发送两个 GET 请求。第一个请求正在发送至 /wp/v2/posts。服务器的响应如下所示：

帖子请求摘录：

[
    {
        "id": 9,
        "title": {
            "rendered": "Hello World! 3"
        },
        "tags": [
            2,
            3,
            4
        ]
    },
    {
        "id": 7,
        "title": {
            "rendered": "Hello World! 2"
        },
        "tags": [
            2,
            3
        ]
    }
    ...
]

tags 数组中的数字不是实际的人类可读标签名称，它们只是标签的标识。在我们收到服务器的第一个响应后，我们需要向服务器发送另一个 GET 请求到 /wp/v2/tags?include=2,3,4，同时提供标签标识符。我们不需要数据库中可用的每个标签，只需要在对第一个请求的响应中引用的标签。换句话说，第二个请求取决于第一个请求的结果。来自服务器的第二个请求的响应如下所示：

标签请求摘录：

[
    {
        "id": 2,
        "name": "test"
    },
    {
        "id": 3,
        "name": "test2"
    },
    {
        "id": 4,
        "name": "test3"
    }
]

经过研究，我发现 Angular 中的嵌套 Observable.subscribe() 方法不是解决此问题的推荐方法。 RxJS 的 switchMap 运算符似乎是要走的路。我的要求如下：

调用帖子
从帖子中获取 ID
使用 ID 调用标签
将标签与帖子合并 return（这样帖子数组就有一个名为 tag_names 的键）

然后 .subscribe() 进入整体流程并获得帖子和标签的组合对象，然后可以使用 NgForOf 在 Angular 模板文件中对其进行迭代。这个网站上的一个人让我 a piece of code to work with. His approach was to use Lodash 根据对象的 id 属性组合两个数组。然而他的方法并没有做它应该做的事情，因为在模板中我无法访问真实的标签名称来显示它们 mergedArrays.

请注意，我不要求您使用 Lodash 将结果合并到您的答案中。只是在我的代码中就是这样尝试的。合并结果的任何其他方式也符合条件。

Answer 1

vanilla JS 的做法是使用 map 和 find 将 ID 替换为对应的标签。

像这样：

.subscribe(({ questions, tags }) => {
    const mergedArrays = questions.map((q) => {
      return {
        ...q,
        tag_names: q.tags
          .map((tagId) => tags.find((x) => x.id == tagId).name)
          .filter((exists) => !!exists),
      };
    });

    this.mergedArrays = mergedArrays;
  });

这是你的例子，但分叉到我的解决方案中： https://stackblitz.com/edit/angular-ivy-vxcxzw?file=src/app/app.component.ts

Angular - 如何使用 switchMap（合并两个服务器响应）从 Wordpress REST API 获取帖子和标签名称？

Angular - How to get posts and tag names from Wordpress REST API using switchMap (merge two server responses)?

lodash

wordpress-rest-api

switchmap