在 MEAN Stack 中将 Angular 分页器连接到后端

在前一节中，我们成功地实现了 Angular 分页器的后端代码。我们的后端代码运行良好，在这一节中，我们将学习如何将 Angular 分页器连接到之前创建的后端。我们将使用以下步骤来完成此操作

1) 我们将转到 service.ts 文件中的 getPosts() 方法。在这里，在 http 请求中，我们需要将查询参数附加到 URL。我们以 getPosts() 方法的参数形式获取这些查询参数，如下所示

2) 现在，我们将创建一个新的常量 queryParams，并将其转换为带有两个反引号 (``) 的模板表达式。这是一个特殊的 JavaScript 功能，允许将值动态添加到普通字符串中。因此，在这两个反引号之间，我们通过首先添加问号来创建 queryParams，问号将其他 URL 与我们的查询参数分开，然后是我们想要传递到后端的查询参数。我们将使用美元符号 ($) 和两个花括号来使用这些参数，如下所示

3) 现在，我们将使用加号将 queryParams 与 URL 相加，如下所示

现在，我们发送一个更新后的请求。

4) 现在，我们需要从 post-list 组件中发送正确的数据。因此，我们将返回到 post-list.component.ts 文件，并在 getPost() 方法调用中，我们将 postperpage 作为第一个参数传递，并将 1 作为第二个参数传递，因为我们想从第 1 页开始。

现在，如果我们保存它并返回到 Angular 应用程序，我们将只看到两个帖子。

5) 在 post-list.component.ts 文件中，我们将创建 currentpage 属性并将 1 设置为默认值。现在，我们将像这样在 ngOnInit() 中使用此 current page

6) 现在，如果我们更改分页，我们需要重新获取帖子。因此，如果我们转到第二页，我们需要再次调用 getPosts() 方法，但这次我们需要将参数值替换为从页面数据中获取的值。更准确地说，我们将页面数据存储在组件的属性中。因此，我们将像这样使用从 pageData 获取的值覆盖 currentpage 值

在上面的代码中，我们将向 pageIndex 添加 1，因为此索引从零开始，但在我们的后端，我们正在使用 1、2 等等。

7) 我们还需要以下列方式使用从 pageData 获取的值覆盖 postperpage 值

现在，我们将保存它并返回到我们的应用程序，以检查它是否正常工作

看起来不错，但如果我们尝试删除帖子，它将被删除，但我们的分页不会正确更新。

8) 因此，让我们继续在前端实现分页。我们需要改进一些事情，我们首先要改进的一件事是，每当我们更改页面时，我们都想显示一个微调器。我们将简单地将 Loading 属性设置为 true，因为我们之前已经创建了这个属性。

9) 现在，我们还要确保仅在我们显示手风琴时才显示分页器，因为如果我们没有帖子，则没有理由显示分页器。但是，我们也希望在加载时显示它，因此我们将 mat-accordion 的 ngIf 子句复制到 mat-paginator。我们将删除“Loading”条件，因为我们希望一直显示它。

现在，如果我们切换页面，我们将看到像这样的微调器

10) 我们也想知道我们总共有多少个帖子。这是我们可以在后端找到的。因此，我们将返回到我们的 js 文件，我们在那里获取所有帖子并找到我们拥有的帖子数。为此，我们将组合多个不同的查询。到目前为止，我们只有一个查询，我们缩小了范围。我们暂时不想创建响应。相反，我们将返回另一个将被执行的查询。我们将返回 postmodel.count()，如下所示

postmodel.count() 只会计算帖子并返回该数字。如果我们在 then 块中也返回计数，则不需要将 then 块与计数链接起来。它基本上会创建一个新的 promise 并自动监听其结果。

11) 我们将使用 postQuery 链接 then 块，我们可以在查询中添加多个 then 块。在此 then 块中，我们将获得计数，然后我们将创建我们的响应，如下所示

因此，首先，我们获取所有帖子，然后我们发出另一个查询，我们在其中获得计数。

12) 我们不能在响应中使用文档，因为文档属性是在另一个 then 块中创建的。因此，我们将首先将其存储到一个变量中，并在响应中使用它。在响应中，我们还将作为 JSON 数据返回计数，如下所示

13) 现在，我们将返回到我们的 service.ts 文件并在此处使用它。在 getPosts() 方法中，我们将更新我们的 http get 请求。我们不仅会得到消息和帖子属性，还会得到 maxPosts 属性。因此，我们将像这样将其添加到我们的 get 请求中

14) 现在，我们必须调整我们转换帖子的逻辑。我们不仅仅想要传递转换后的帖子数组。相反，我们想要传递一个对象，该对象既包含更新后的帖子数组（其中所有帖子都有一个没有下划线的 ID），又包含最大帖子数。因此，在 map 中，我们将返回一个 JavaScript 对象，它具有一个帖子属性，但除了该帖子属性之外，它还具有一个 maxPosts 属性，该属性只是从 postData.maxPosts 中获取数据，如下所示

15) 因此，在 subscribe 方法中，我们不再获得 transformedPost，而是可以说 thransformedPostsData，并且该对象将具有一个 posts 属性，该属性保存着帖子。

16) 该对象还将保存有关我们的最大帖子数的一些信息，我们也想使用它。在我们发出数据的地方，我们不再只想要传递一个帖子数组，因此我们将更改 subject 的泛型类型，因为它现在应该是一个 JavaScript 对象，它具有一个 posts 属性，该属性是一个帖子数组。但是我们还想要第二个属性，即一个数字 count。

17) 为了使我们的 subject 产生该更新后的数据，我们将向下转到我们调用 next 的地方，并且我们不会只是传递数组的副本，而是传递一个 JavaScript 对象，该对象保存着帖子的副本，并且它将具有一个 postCount 属性，该属性保存着我们的 transformedPostsData.maxPosts 值。

18) 我们得到了一些错误，因为我们在 post-service 中的其他部分，我们实际上尝试将此更新后的帖子数组传递回我们的组件。现在，我们不需要使用以下突出显示的几行代码。

由于我们从另一个组件导航到我们的 post-list 组件，因此我们可以保证重新加载该 post-list 组件。因此，ngOnInit() 将执行并将无论如何获取新帖子。

我们将在 updatePosts() 方法中执行相同的操作。

19) 在删除帖子的情况下，情况有所不同。我们从帖子列表中执行此操作，因此，我们实际上将删除我们刚刚能够看到的帖子。因此，我们绝对需要在此处重新获取数据，并且最优雅的方法是完全删除此处的 subscribe 方法，然后简单地返回 HTTP 调用，然后订阅到帖子列表组件。

现在，在 post-list.component.ts 文件的 onDelete() 方法中订阅此内容，如下所示

我们还希望在此删除过程开始时显示加载微调器。因此，我们将 Loading 属性设置为 true。

20) 我们还在 ngOnInit() 中收到一个错误，我们在那里订阅我们的 subject，并且在这里，我们仍在等待数据，这是一个帖子数组。但是由于我们刚刚更新了我们的 subject。我们现在正在取回一个 JavaScript 对象，该对象具有一个帖子属性和一个 postCount 属性。因此，在 post-list 组件中，我们将参数重命名为 postData，因为这现在似乎更合适，并且该类型将是一个 JavaScript 对象，该对象具有 posts 属性和 postCount 属性，如下所示

对于存储数据，我们将像这样使用 postData。

21) 现在，我们将使用 postCount，为此，我们有 totalposts 属性。我们将此属性最初设置为 0，然后将其设置为 postCount，如下所示

现在，一切都很好。让我们转到我们的 Angular 应用程序并尝试删除帖子。

因此，一切正常。我们将在下一节中启动一个新模块。我们将向我们的项目添加用户身份验证。

下载完整项目 (Connecting angular to the backend.zip)