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

以角度方式执行此操作的方法是使用服务。您不直接从组件中调用API。您需要创建一个“服务”来处理API，然后在您的组件中注入您的服务并在那里使用它们。

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

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

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

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

Answer 2

这两个选项都是可行的..

您可以创建另一个响应所需数据的API。新API可以校准先前API端点的控制器功能，并以所需格式返回数据。

注意：如果您使用的是自己的服务器，则可以使用此功能。

如果您想使用现有的API，也可以链接API调用。调用用户api，然后当您获得用户详细信息时，在订阅处理程序中，向posts API发出另一个请求。

注意我使用这种方法可以看到的唯一问题是请求的数量..因为每个用户都会有帖子请求。

最终决定权归你所有。你必须看到优点和缺点..如果服务器代码也是你的，生病建议第一种方法..

如何在Angular 2中加入两个API

2 个答案: