问题标签 [angular-material-paginator]

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 投票
3 回答
50727 浏览

angular - 角材料分页器不工作

我正在尝试在我的应用程序上添加 Angular Material Paginator。

在模块中添加了MatPaginatorModule

但它给出了一个错误:

未捕获的错误:模板解析错误:

不能绑定到 'length',因为它不是 'mat-paginator' 的已知属性。

  1. 如果mat-paginator是一个 Angular 组件并且它有length输入,那么验证它是这个模块的一部分。
  2. 如果mat-paginator是 Web 组件,则添加CUSTOM_ELEMENTS_SCHEMA到此@NgModule.schemas组件的 以禁止显示此消息。

也许我错过了什么?

0 投票
1 回答
255 浏览

angular - Angular Material Paginator 使用数据库数据,而不是静态计数器

我正在学习 Angular 并通过AngularMaterial Course实际分析 Angular Material Paginator 。

实际上,mat-paginator页面计数器基于课程的“静态”属性lessonsCount

<mat-paginator [length]="course?.lessonsCount"

“数据库”是:

有没有办法从课程中删除“硬编码”lessonsCount属性course并使用基于来自数据库的课程数量的课程数量courseId,而不是来自课程属性“课程数量”?

0 投票
3 回答
12556 浏览

html - 样式化 Angular 材质分页器

我有一个 Angular Material Paginator 看起来像

在此处输入图像描述

我想设计它,它应该看起来像

在此处输入图像描述

我很难为它设计样式。我只能移动分页器中的元素(开始和结束位置),除此之外我无法修改任何东西。

请让我知道如何做所需的样式?

这是 stackblitz 链接https://stackblitz.com/edit/angular-tjhkpo

0 投票
5 回答
8547 浏览

angular - 当 mat-table 位于 NgIf 内部时,mat-paginator 会中断

我有一个正在使用的角度项目,mat-table对于mat-paginator某个视图,问题是视图有一个网格视图和一个带有切换的表格视图,网格视图是默认的,当网格视图处于活动状态时,表格是使用 NgIf 隐藏的。如果我将默认设置为表格视图,那么分页工作正常,除非我切换到网格视图并返回,如果默认设置为网格,当我切换到表格视图时它会中断。我猜是因为当这段代码运行时表是隐藏的:

我尝试了控制台日志记录this.sliceList,并且sliceList.paginator在默认网格视图时未定义,所以我认为这是问题所在。我怎样才能解决这个问题?

0 投票
0 回答
266 浏览

angular-material - 当我从 API 获取数据到垫表时,分页器不起作用。垫表是动态生成的

我正在动态创建我的垫表,其中通过数组传递列并且数据也在动态呈现。Mat-paginator 在本地数组上运行良好。但是当我从 API 获取数据时,它没有响应。我尝试了不同的方法,但没有找到任何解决方案。

这是我来自 Html 文件的代码。

`

`

Js文件代码`

`

0 投票
1 回答
619 浏览

angular - 材料设计分页器不适用于动态生成的表格

我正在尝试使用材料表生成具有多列的多个表,并且它工作正常。但是当对每个表的结果进行分页时就会出现问题。好像没有取每张表的引用,那么所有的分页符都设置为0。

这是我在 stackblitz 中的代码:

https://stackblitz.com/edit/angular-k8qfd3?file=src%2Fapp%2Fapp.component.ts

0 投票
0 回答
2555 浏览

angular - Angular 8 Material Table 分页和排序,使用自定义组件和来自 API 错误的动态数据 - 问题

该项目在 Angular 8.3.19 上,我使用材料表,所有数据都从 Web 服务(单元格数据和列)动态获取。我创建了一个新的共享组件表,它实现了所有数据并动态创建每个表。问题是排序和分页不适用于自定义共享组件,但如果我在每个组件中创建每个表,则分页和排序工作正常。

下面你看到自定义共享组件表不起作用

src/app/shared/components/table/table.component.ts

src/app/shared/components/table/table.component.html

以及使用来自 Table 共享组件的所有数据动态创建表的组件

src/app/患者/组件/患者列表/患者列表.component.html

下面你会看到有效的代码

src/app/患者/组件/患者列表/患者列表.component.ts

src/app/患者/组件/患者列表/患者列表.component.html

0 投票
1 回答
717 浏览

angular - 自定义角度材料分页器输入

我正在使用 Angular Material Paginator,这是我的垫子分页器的 html 代码

我的分页器看起来像这样

在此处输入图像描述

问题是我有一个巨大的数据列表来为分页器显示这么多页面,我正在寻找一种方法来自定义分页器并添加一个输入来指示我想要显示的页面数,有什么解决方案要编码吗?

0 投票
1 回答
155 浏览

angular - Angular Material Paginator 使用来自前端的数据

我从后端一次收集所有数据并使用角度材料分页器。所有数据都显示在同一页面中。有人可以告诉我如何使用角度材料分页器根据页面大小划分数据并在不同页面中显示数据。

我在 UI 中显示的数据不是带有列的表格格式,而是卡片格式的数据列表。它是一个 Ionic 4 Angular 8 应用程序,在 HTML 中带有离子元素,我已将 mat-paginator 放置在 ion-header 标记内。

0 投票
1 回答
619 浏览

angular - 在 Modal 弹出窗口中使用时,Mat Paginator 无法正常工作

我正在从模式弹出窗口内的 API 响应动态加载我的数据源,但似乎 Paginator 始终未定义,因为我的 viewChild MatPaginator 位于模式弹出窗口中,单击按钮即可打开。

尝试了这个解决方案(这个链接)但没有运气

有人可以帮我解决这个问题。下面是我的代码截图

初始化

在此处输入图像描述

从 api 响应设置数据源

在此处输入图像描述

我无法获得分页参考的最终控制台结果

在此处输入图像描述

提前致谢!