在 MEAN Stack 中转换响应数据

在之前的章节中，我们学习了如何从数据库中获取数据。之前我们讨论过 map() 函数，但是我们没有使用它。我们还没有在前端使用 ID。 我们之前讨论过一个问题。 就是我们希望在前端有一个没有下划线的 id，但是我们的后端数据确实有一个下划线。

所以，我们需要建立一个在前端存储正确数据的设置。我们可以简单地将前端模型上的 id 重命名为 _id， 这样就可以正常工作了，但是我们将转换从服务器返回的数据。我们将使用以下步骤来转换数据

1) 我们将回到我们的 service.ts 文件，在 getPosts() 函数中，我们将在 subscribe() 方法之前使用另一个函数，即 pipe()。 pipe() 函数允许我们添加这样的运算符。 我们可以管道传输多个运算符。 我们将导入运算符以在 pipe() 方法中使用它。 我们将使用 map 运算符，因此我们将从 rxjs 包中以以下方式导入它

map() 方法允许我们将数组的每个元素转换为一个新元素，并将它们全部存储回一个新数组中。

2) 我们将使用 pipe 函数，并以下列方式传递 map 运算符

3) 在 map 方法中，我们获取我们的 postData，然后在该函数的主体中对它进行一些操作。 此 postData 将不是 {message: string, posts: Post[]}。 它不会持有有效的 post，因为 ID 是错误的。 我们将在以下方式中将 posts 的类型设置为 any，而不是 post[] 类型

4) 在函数的主体部分中，我们将返回 posts 数组，我们将通过以下方式从 postData 中访问 posts 来做到这一点

这将自动被 rxjs 包包装成一个 observable，以便 subscribe 函数仍然订阅一个 observable。

5) 我们已经去掉了消息，但我们还需要转换每个 post，我们将使用普通的 javascript 方法来做到这一点。 可以将此 map() 方法添加到任何数组，我们将以下列方式使用它

6) 在 post 数组中，我们需要将每个 post 替换为一个新的 javascript 对象。 我们将以下列方式替换它

7) 我们还需要更新我们的 subscribe 代码。 我们只是用 transformedPost 替换了 postData，并将其分配给 this.posts，如下所示

现在，我们将保存它并在 localhost:4200 上运行我们的 angular 应用程序。

在下一节中，我们将学习如何删除文档。我们将编写删除代码，为此，我们将使用附加到每个扩展面板的删除按钮。