添加带有 ID 的帖子

在之前的章节中，我们学习了如何从数据库中删除文档并进行前端实时更新。 在本节中，我们将学习如何添加带有 id 的帖子。

如果我们将一个新帖子添加到数据库中，添加后，如果我们尝试删除它，它将不会被删除并显示以下类型转换错误

出现此类型转换错误的原因是我们传递了 null 作为要删除的帖子的 ID。 我们在这里没有收到响应，因为我们没有在服务器端应用程序上处理错误情况。 为了解决这个问题，我们将使用以下步骤

1) 我们将回到我们的 js 文件并到达删除路由。 在这里，在 deleteOne() 方法中，我们只处理成功的情况，而不处理失败的情况。 如果我们转到客户端代码，在 posts.service.ts 文件中添加新帖子，我们创建一个 ID 为 null 的帖子。

我们会立即将此帖子添加到我们的前端应用程序中。 现在，一旦我们从服务器获得成功响应，我们就会这样做，这意味着该帖子已保存在数据库中。 但是，我们没有使用在服务器上动态生成的 ID。 我们没有在本地帖子中更新该 id，但我们需要更新它。 有两种方法可以解决这个问题

1. 第一种方法是在 servie.ts 文件的 addPost() 方法中，每当我们获得成功响应时，我们都会调用 getPosts()。 它将获取更新后的帖子并更新我们前端应用程序中的帖子。
2. 我们可以使用第一种方法，但第一种方法也是一种冗余。 如果我们在帖子上添加内容，那么我们为什么要获取和更新所有帖子。 因此，我们还有另一种方法，我们可以取回已创建帖子的 ID，并在 service.ts 文件的 addPost() 方法中使用它。

2) 现在，为了使用第二种方法，我们将回到我们的 app.js 文件。 在帖子路由中，我们将 then 块附加到 save()。 在这个 then 块中，我们将获得一个结果对象，其中包含有关此保存操作结果的信息。 此 then 块的编码方式如下

现在，我们启动服务器并使用 angular 前端添加一个帖子。 如果我们回到我们的控制台，我们将看到添加的帖子的信息以及 id。

3) 我们现在将在 then 块中使用 response 语句，除了我们的成功消息之外，我们将以以下方式发送 postId 字段

4) 现在，我们将在 posts.service.ts 文件中使用 postId。 在 subscribe 方法中，我们不关心消息。 在帖子服务中，我们需要更新我们期望的返回值以反映 postId 字段。 我们将以以下方式从 responseData 中获取 postId

5) 现在，我们需要以以下方式更新我们在 addPost() 方法中创建的帖子的 id

现在，我们更新了 id，我们将保存它。 我们将添加另一个帖子，现在如果我们尝试删除它，它将被成功删除。

现在，一切正常。 在下一节中，我们将启动一个新模块。 在本模块中，我们将学习如何增强我们的应用程序。

下载完整项目（Adding a post with an id.zip）