在 MEAN Stack 中从数据库删除文档

在上一节中，我们转换了响应数据，但我们没有证明它。本节我们将证明响应数据确实被转换了，并且我们将学习如何在 MEAN Stack 中删除文档。我们将使删除按钮可工作，并将其呈现在每个展开面板中。

我们将使用以下步骤来添加一个用于删除文档的新路由

1) 我们将返回到我们的 app.js 文件，并且我们将为 delete http 动词添加一个新的路由，并使用 app.delete()。我们将请求字符串放入此函数中，该函数在此处作为第一个参数到达 API posts。

之前，我们使用 "/api/posts"，但现在我们实际上需要在 url 中编码一条新的信息。对于删除请求，我们将想要删除的事物的 ID 或其他标识符作为 url 的一部分发送。 我们不在这里发送请求正文。

我们将通过以下方式添加一个动态路径段，即添加一个冒号

2) express 将提取 id。我们将传递第二个函数给它，它将为所有传入请求触发。在此函数的主体部分，我们将简单地以以下方式显示 id

在上面的代码中，req.params 是由 nodejs 或 express 管理的属性，它使我们能够访问所有编码的参数。

2) 我们将发送回状态代码 200 和 json 响应，我们在其中以以下方式发回一条消息

4) 现在，我们将该路由与 angular 连接起来。我们将返回到我们的 post-list.component.ts 文件，我们在其中创建了 DELETE 按钮。我们将向它添加一个 click 监听器并调用 onDelete() 方法，并将 id 传递给它，如下所示

5) 我们将返回到我们的 post-list.component.ts 文件来创建 onDelete() 方法。我们将以以下方式执行此操作

6) 我们需要在我们的服务中调用一些东西，它发送该删除请求。因此，我们将返回到我们的 service.ts 文件，并且在此文件中，我们将创建 deletePost()。在此函数中，我们将使用 angular http 客户端发送删除请求。我们将以以下方式创建此函数

7) 现在，我们需要订阅要发送的请求，并且在这里我们将简单地在控制台中输出删除消息，如下所示

8) 现在，我们将在 post-list.component.ts 中使用此 deletePost() 方法。因此，我们将返回到我们的组件，并在 onDelete() 方法中，我们将以以下方式使用它

现在，我们没有更新前端上的数组。因此，在单击 DELETE 按钮后，我们仍然会在前端看到该帖子，但它将发送请求并将看到 deleted 消息作为响应。

9) 我们现在将使用 mongoose 模型和 deleteOne() 方法从后端删除一个项目。我们将返回到我们的 aap.js 文件以到达删除路由。我们将以以下方式使用模型和 deleteOne() 方法

10) 在此函数中，我们将传递一个 javascript 对象来缩小应该删除的内容。在此对象中，我们传递 _id，然后我们附加一个 then 块以查看它是否成功。在此函数的主体中，我们将获得该操作的结果。我们将控制台输出此结果并发送响应，如下所示

现在，我们保存代码并返回到我们的 angular 应用程序。我们将单击删除按钮，如果再次重新加载我们的 angular 应用程序，我们将不会在此处看到该帖子，因为它将从数据库中删除。

现在，我们能够从我们的 mongodb 数据库中删除元素，但是缺少一件事，即我们的前端 Ui 目前没有实时更新。

11) 对于实时更新，我们将向我们应用程序的其余部分发送一个新的 postsUpdated 通知。因此，我们将返回到我们的 posts.service.ts 文件，并在 deletePost() 方法中，我们将用 postUpdated 语句替换 console 语句，如下所示

12) filter() 函数允许我们只返回帖子数组的一个子集。我们将传递函数作为 filter 函数的参数。对于数组中的每个帖子，将执行此函数。如果它返回 true，则将保留该帖子元素，但如果它返回 false，则该元素将不属于我们存储在更新的帖子中的新过滤帖子数组的一部分。因此，将以以下方式编码此函数

现在，当我们从这里删除一个帖子时，我们的前端 UI 将会更新。

下载完整项目( Deleting documents from database.zip )

在下一节中，我们将学习如何添加带有 id 的帖子。