问题标签 [ngx-pagination]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
2367 浏览

javascript - 分页无法正常工作 - Ngx-pagination

我是 angualr 的新手,并且在 Angular 上开发了一些应用程序。

我有一个表格,其中行将被动态添加,并且分页用于遍历表格。我每页使用了 5 行,可以通过下拉菜单选择每页的这些行。

面临的问题:当我单击添加按钮时,每次都会添加行。添加 5 行后,如果我单击添加按钮,则将显示第二页分页。但是第二页中的行只包含第一页的数据。

第一图像

第二个图像

如果我选择下拉菜单以显示项目,则第 6 项将为空。第三图像

第 2 页分页下的第 6 个文本框选择第一页第 1 个输入的值。

请帮我解决这个分页问题。

打字稿代码:

HTML 代码:

样式表

0 投票
1 回答
1029 浏览

javascript - ngx 分页,如何使用 NgFor 进行多个分页?我的代码有问题,(pagechange)正在操作组件数据

我有多个分页ng-for。对于多个实例,我使用变量 fromng-for来重复分页,但是 (pagechange) 事件正在改变数据。当我在子分页中更改页面时,它正在更改数据(first_name)。我有一个重现的问题stackBlitz

我也尝试过使用索引,但它的主要分页令人不安。

0 投票
0 回答
490 浏览

angular - 分页后如何动态获取Angular FormArray字段中的绝对索引?

我正在使用表单数组来显示数据,并有一种方法可以在表中动态添加行。我将检查一个表ASNlst中的多行并将其推送到另一个表ConnectedASNlst。这工作正常。但是,当我尝试从第二页检查一行(例如:第 2 页和第 3 行)时,现在实现了分页,我仍然会看到第 1 页和第 3 行记录从ASNlst移动到ConnectedASNlst。如何获取动态反应形式的索引值

我尝试使用slice但这不起作用


我应该能够将所有页面中的选中行从ASNlst 移动ConnectedASNlst。基本上如何获得列表项的绝对索引?

0 投票
1 回答
846 浏览

html - 是否可以在 ngx-pagination 中不使用省略号?

我正在使用ngx-pagination包并尝试实现这一点:

在此处输入图像描述

但这就是我到目前为止所拥有的:

在此处输入图像描述

我的 HTML:

我的 CSS:

  • 您知道是否可以在不同项目之间放置更多空间?从而增加组件的宽度。
  • 如果有更多可用宽度,请显示更多数字而不是省略号 ( ...)。
  • 在数字之间显示一个点(如子弹)。为此,我找到了这个。但效果不佳,它显示数字下方的点。仅适用于当前号码。见下文: 在此处输入图像描述

Stackblitz:https ://stackblitz.com/edit/angular-xbh9ft

0 投票
2 回答
659 浏览

angular - 如何使用 FormControl 制作 Ng-5 滑块的多个实例并在分页期间跟踪?

我正在使用 FormContol 在 NgFor 循环中制作 Ng-5 滑块的多个实例。在使用 Ng-x Pagination 进行分页期间,slider 的值会丢失。我想知道如何在分页期间跟踪滑块值以及如何在每次迭代期间为每个滑块动态分配一个新变量以获取/设置值?

HTML:

TS:

我希望获取/设置每个滑块的值。

0 投票
1 回答
340 浏览

angular - ngx-pagination“RangeError:超出最大调用堆栈大小”

我在带有 Angular 的 Ionic 应用程序中使用ngx-pagination包。

正如您在附加的 Stackblitz 中看到的,我创建了一个自定义组件,它接收两个输入参数currentSteptotalItems. 我们从 HomeComponent 页面开始。如果我们单击“ClickMe”按钮,我们会转到使用自定义分页模板的 InstructionsPage。问题是,如果我按下“返回”按钮,我会返回 HomeComponent,但如果我再次按下“ClickMe”按钮,则会引发错误。

在此处输入图像描述

演示:https ://stackblitz.com/edit/ionic-5s2qwc

0 投票
1 回答
1634 浏览

html - 使用'ngx-pagination'的默认样式不会覆盖角度样式css

我目前正在使用 Michael Bromley 的“ngx-pagination”模块。该模块工作正常,但它似乎是唯一不使用现有主题 css 的分页模块。现在看起来像:

在此处输入图像描述

阅读他的解释,似乎只需通过添加覆盖 css 应该很容易/deep/。好吧,它不起作用......有人说它'不推荐使用',所以我尝试添加!important,但这似乎不起作用。

见-> https://stackblitz.com/edit/angular-p3swdg

“app.component.css”中,我上传了主题 css,最后它应该看起来像(参见文档):

在此处输入图像描述

任何帮助,将不胜感激。

0 投票
2 回答
644 浏览

angular - 使用 Angular 7 和 NgxPagination 的服务器端分页

我正在尝试使用NgxPagination编码分页。但我不知道如何将pageIndex从组件传递到服务。它只显示一页。并且无法转到下一页。图片参考

我提供了下面的代码供您参考。

HTML

组件 ts

在我的服务代码中,我制作如下

服务

我应该添加什么才能使其正常工作。

希望大家能帮帮我

提前致谢。

0 投票
1 回答
2090 浏览

angular - Angular 7:分页无法正常工作

我的分页有问题。抱歉,我不太明白如何通过this.total = res.totalPage;组件传递到服务来使其按预期工作以使其计数页面。因为它现在只显示 1 页“图像参考”。下面我提供了htmlComponentService代码,以使您易于理解。在 html 代码中,我只显示部分分页。

HTML

零件

服务

部分noPage: res['noPage'] 参考当前页面。

我有示例分页代码,但我不知道在我的代码中实现。

希望大家能帮忙。

提前致谢

0 投票
1 回答
4260 浏览

angular - ngx-分页单击下一页不起作用

我的分页有问题。当我尝试单击下一页时,它无法按预期工作。当我单击数字转到下一页时,它也不起作用。

我提供了下面的代码和一个演示链接供您参考。

HTML

零件