在 MEAN Stack 中更新服务器上的数据

在上一节中，我们学习了如何使用 Angular 应用程序将数据更新到数据库中。我们的编辑和删除按钮运行良好。在本节中，我们将学习如何立即重新加载页面，因为在编辑帖子后，该帖子的 ID 会显示在 URL 上，这并不是一个好方法。

我们能够更新帖子，现在不需要在服务器上使用控制台日志。在前端的 posts.service.ts 文件中，我们在其中发送那个 http 请求，我们获得了在前端更新帖子所需的所有数据。这有点多余，因为我们使用帖子的唯一地方是在根页面中。在这个根页面中，我们总是获取一个新副本，但我们仍然需要知道如何在获取成功响应后本地更新帖子。我们将使用以下步骤在服务器上本地更新数据

1) 我们将返回到 updatePost() 方法，我们在其中创建 http 请求。在 http 请求的订阅中，我们不会使用控制台日志语句，而是用该版本替换帖子数组中的当前版本。为此，我们将克隆我们的帖子数组并将其存储在一个常量中，如下所示

2) 之后，我们将通过 ID 搜索旧帖子版本，因此我们将以如下方式搜索索引

findIndex() 方法接受一个函数，如果找到我们要查找的帖子，则该函数将返回 true。因此，在这个函数中，我们将检查我们在该数组中查找的帖子的帖子或帖子的 ID 是否等于 post.id。如果相等，那么我们找到要替换的帖子的索引。

3) 现在，我们将以如下方式将该索引的帖子替换为我们的新帖子

4) 现在，我们需要以如下方式将 updatedPosts 数组的值存储到原始帖子数组中

5) 现在，我们还需要以如下方式告诉我们的应用程序关于此更新

现在，我们还想确保如果我们处于编辑页面并且我们重新加载，我们不会再次获得空白表单，因为我们无法获取帖子。我们失败的原因是，如果我们重新加载，我们所有的状态都会丢失，并且应用程序会重新启动。因此，我们服务中的帖子数组将为空，因为我们只使用 getPosts() 方法从服务器获取帖子，该方法仅在帖子列表组件中调用，但是如果我们重新加载页面，我们还没有访问过帖子列表组件。

6) 因此，我们还需要从服务器上获取那个单一的帖子数据。我们将通过在 post.service.ts 中循环使用 getPost() 方法来做到这一点，而不是从我们的本地帖子数组中获取帖子，而是从服务器中获取帖子。所以，我们将返回到我们的 js 文件，在这里我们将添加一个新路由，它将是一个 get 请求。

7) 此方法将连接到我们的数据库，并在 URL 中呈现的 ID 找到一个帖子。为此，我们将使用我们的 postmodel，在那里我们有一个 findById() 方法。我们将传递 ID 作为参数，mongoose 将查看我们的数据库并找到其中的具有该 ID 的元素。

我们将附带一个 then 块，我们在其中获取一个参数。在这个块中，我们将检查我们的帖子 ID 是否存在。如果它存在，那么我们将返回一个状态码为 200 并且我们的帖子作为 json 数据的响应，否则我们将返回一个状态码为 404 并且消息 “未找到帖子” 作为 json 数据的响应，如下所示

8) 现在，我们只需要从我们的客户端调用 post.service.ts 文件中的此路由。在 getPost() 方法中，我们返回了一个帖子。现在，我们将摆脱它，因为它再也无法做到这一点了。原因是如果我们在那里进行 http 调用，那么它将是一个异步代码，并且我们无法在 addPost() 的订阅中返回，因此我们需要同步返回。

我们将在 getPost() 方法中使用，而不是使用那个 return 语句，我们将返回从 angular http 客户端获得的 observable，以便我们可以在对该数据感兴趣的组件中订阅。我们将以如下方式返回 observable

我们还需要以如下方式明确添加我们获取的数据类型

我们将在 post create 组件中订阅此内容，而不是在 getPost() 中订阅此内容。在 ngOnInit 中，我们不会像这样分配 this.post

相反，我们将添加一个订阅，我们也不需要从中取消订阅，因为它是由 angular http 客户端添加的，因此 angular 会处理它。在此订阅中，我们知道我们将最终获得我们的帖子数据，并且我们以如下方式将值分配给帖子

现在，如果我们返回到我们的应用程序，我们将看到以下错误

9) 我们收到此错误是因为，我们最终拥有帖子数据，但不是从一开始就拥有。这是因为 http 请求需要一些时间才能执行。但是，最初的帖子是未定义的，并且我们尝试从 post-create.component.html 文件中使用 ngModel 读取一个新值。我们将通过使用所谓的 Elvis 运算符来修复它。在模板中，我们将在帖子后添加一个问号，这将是让 Angular 检查帖子是否存在，然后再尝试读取标题和内容。如果帖子不存在，它将使用任何内容填充标题和内容字段。

现在，如果我们保存并重新加载页面，我们将不会收到错误。

注意：我们在 posts.service.ts 文件的 updatePost() 方法中用 ID 替换旧帖子的更新机制实际上将不起作用。在这里它什么也不做，因为如果我们从未访问过我们的帖子列表页面，那么我们在该数组中将没有任何帖子，因此没有任何内容可以更新。

现在一切都运行良好。在下一节中，我们将重新组织我们的后端路由。