javascript - 如何在 Angular 2 中连接两个 API

Question

我想模拟一个微博应用来学习Angular 2。

我正在使用以下 json 占位符链接:

• users
• post

如您所见，post api 有 userId(而不是 username)。如果我必须在列出所有帖子时显示用户名，我是否需要另一个同时包含帖子和用户名的 API，还是可以使用对上述 API 的两个不同调用来完成？

这就是我列出帖子的方式:-

<li *ngFor="let post of posts">
    <div>{{post.userId}}</div>
    <div>{{post.id}}</div>
    <div>{{post.title}}</div>
    <div>{{post.body}}</div>
</li>

如您所见，这里根据 api 调用，我获取了 userId...而不是我希望它显示用户名

Answer 1

在 Angular 中做到这一点的方法是使用服务。您不会直接从组件内调用 API。您需要创建一个“服务”来处理 API，然后将您的服务注入(inject)组件中并在其中使用它们。

在您的特定场景中，您将有两个服务:“UserService”和“PostService”。这些服务中的每一个都有一个调用 API 的适当的“get”方法。然后在您的组件中，注入(inject)这两个服务并分别调用它们各自的方法。

<小时/>

关于您对问题的具体更新，假设您在收到来自 API 的结果后有一个“posts”数组和一个“users”数组。现在，请注意以下逻辑:

for (let i=0; i<posts.length; i++)
{
    posts[i].username = users.filter(u => u.id === posts[i].userId)[0].username
}

我们在这里所做的是迭代所有“帖子”，并通过交叉引用用户数组来为每个帖子添加“用户名”属性。只需确保使用正确的语法和区分大小写，因为我还没有测试这一行，只是在其中包含了逻辑