问题标签 [ngx-pagination]

我使用 Ngx 分页。并且显示的数据量与我在“totalItems”中设置的一样多。也就是说，如果我指定的数据多于 JSON 中的数据，则会添加额外的空白页面。这不好。如何做到这一点，自动确定要在分页中显示的数据量？

html:

ts：

我是 Angular 的新手，所以我遇到了这个问题。

我收到此错误

无法在 PaginatePipe.push../node_modules/ngx-pagination/dist/ngx-pagination.js.PaginatePipe.transform 读取未定义的属性“totalItems”

组件代码：

我正在尝试ngx-pagination在我的 Angular 6 应用程序上实现服务器端分页。

我已尽我所能遵循文档，但我遇到了以下问题并且不知道如何继续。

问题

1. 该组件从 api 加载并获取数据，但直到我通过导航到下一页然后到上一个页面再对 api 进行两次调用之后才显示在渲染上。

2. 未调用 api 第二页上的数据。

截图

初始页面加载

来回导航后

示例代码

任何帮助，将不胜感激。

更新

getsample()正在页面加载时执行，api 返回数据。为了安全起见，我将方法更改为async一个，现在看起来像这样：

我也实施了布兰登给出的答案，但问题仍然存在。

如何修改此代码以同时获得分页和过滤？问题是，如果我的表中有 1000 行并且每页显示 50 行，则筛选依据name将仅应用于显示的 50 个条目。

感谢您的时间！

我正在使用 ngx-pagination 并尝试将分页转换为下拉列表（Angular 6）

详见： https ://github.com/michaelbromley/ngx-pagination

我面临两个问题：

• 它给出了像 1 2 3 4 ... 32 这样的页面列表
• 其他先更改页面。下一个最后...下拉值没有改变

我已经使用PaginationControlsDirective.

我有一个要求，我必须打开一个对话框组件（弹出）作为分页组件的辅助出口。场景是：

有一个父组件。

分页组件是主要的出口。

对话框/弹出窗口是次要出口。

分页组件的 URL：http://localhost:4200/pricing/quickViewPricing/pricesite?page=2

现在单击按钮，我调用router.navigate辅助插座：

弹出窗口打开 URL：

pricesite是我的主要出口 在quickViewPricing fullViewPopup是我的次要出口在quickViewPricing

ISSUE : 当弹出窗口出现时，页码不保留，页面返回第一页。

路由模块：

QvpPaginationContainerComponent //按钮点击事件处理程序

QvpPaginationContainerComponent.html

selector app-price-site 是一个自定义的分页组件

1. QvpPaginationContainerComponent是实现分页的主要出口
2. FullViewPriceComponent是辅助出口，是一个运行良好的对话框。

当我导航到第 2 页QvpPaginationContainerComponent并单击该按钮时，会弹出窗口，但该页面会重置为QvpPaginationContainerComponent.

对此的任何帮助都非常感谢。

我有一个 ngx-pagination 的自定义分页模板实现，它可以正常工作。但是，当我尝试使用带有分页的过滤器管道时，分页中断：分页控件与应用过滤器之前保持相同，并且过滤后的数据集不再分页（屏幕上出现 11 个项目而不是 10 个） . 过滤后，分页控件在页面底部仍然可见，但不影响过滤后的数据，即没有页面更改。

组件 HTML

组件 ts

过滤管道导入 { Pipe, PipeTransform } from '@angular/core';

编辑：添加演示。代码有点不同，经过重构以删除不需要的代码。https://stackblitz.com/edit/angular-fnbnaw

如何更改ngx-paginationCSS？我试过：

在组件.css中，但没有任何改变，我收到了这个警告

[弃用] CSS 动态配置文件不再支持 /deep/ 组合器。它现在实际上是无操作的，就像它是后代组合器一样。/deep/ 组合器将被移除，并且在 M65 时无效。你应该删除它。有关详细信息，请参阅https://www.chromestatus.com/features/4964279606312960 。

我该如何解决这个问题？感谢您的时间！

编辑：

.html

.css

编辑2：（渲染后的html）

我创建了一个 Angular 6 项目，我在其中获取一个嵌套的公司对象，该对象包含多个地址以显示在视图中。我想每个子视图只显示其中两个，并使用分页来显示其余部分。我使用 ngx-pagination 和响应式表单。

但不幸的是，分页不能正常工作。它只显示前两个地址（如果“pageSize”= 2），当我单击分页控件时没有任何变化。只有“currentPage”（p - 在我的情况下）的值会发生变化。

如果我检查我的公司对象，它会填充该公司的所有现有地址，但我不会让它们消失。

我究竟做错了什么？

如果我更改“itmesPerPage”退出地址的数量，我可以显示所有这些地址 - 就是这样。

为了测试我使用了“拼接管”，但效果是一样的。我只能显示第一个地址，而永远不会——例如——最后一个。

如果我在视图中“检查”我的元素并单击控件，则可以识别页面更改但没有任何更改。

这是我的“公司详细信息组件”，用于创建抽象控件并从服务器加载数据：

ngOnInit() {

}

}

}

视图的相关部分，魔法应该发生的地方：

…………

我是角度的新手，任何帮助将不胜感激。

非常感谢提前汤姆

我有 2 个表，每个表的行都是动态添加的。基于这些动态添加的行，将显示分页。一页显示的行数由下拉菜单决定。

面临的问题：只有当我开始将行添加到第二个表时，才会显示第一个表分页。

打字稿代码：

HTML 代码：

CSS 样式表：

还附上截图以供参考。

添加一些行后，上图中没有显示分页

但是向第二个表添加行后显示分页，但不正确

请帮我解决分页问题，​​或者为 Angular 推荐一些好的分页示例