Angular 6:如何在Angular Material Table上实现分页和排序

文章/答案/技术大牛

发布

1回答

angular、angular-material

如何在Angular Material DataTable中传递我的接口服务数据。我想呈现我的数据，而不是这个静态数组。如果我像*ngFor="let item of service.list"一样呈现我的数据，那么数据被加载了，但是分页和排序不起作用。请给出一些解决方案或例子。import { Component, OnInit, ViewChild } from '@angular/core'; import { M

浏览 22提问于2019-01-14得票数 5

回答已采纳

1回答

角度材料分页和排序不能如预期那样工作

javascript、angular、angular-material

我已经实现了角材料数据表，其中包含pagination and sorting，但在从数据库中提取记录后，它不能像预期的那样工作。report.componenet.html： <table mat-table matSort [dataSource]="dataSource"> <tr mat-row *matRowDef="let row; column

浏览 32提问于2021-09-21得票数 2

1回答

角质数据表，即使没有数据，也会显示表格标题

angular、angular-material、mat-table

我使用角材料数据表在一个带有matSort的表中显示一些与产品相关的数据来进行排序。在数据表中，我使用了[hidden]="!data"，但是当没有数据时，仍然会显示表头。<table mat-table [hidden]="!matHeaderRowDef="displayedColumns"></tr> <tr mat-row *matRowDef="let row; columns: displayedColumns"

浏览 8提问于2021-12-06得票数 0

1回答

Angular的数据表或网格中的分组要素

angular、grid、angular-material、angular5

我们正在Angular 5上使用material框架应用程序，并寻找一个可以帮助我们在表格中进行分组、分页和排序的ui插件。提前谢谢。

浏览 1提问于2018-04-03得票数 1

1回答

如果我将dataSource定义为dataSource: any[]，我如何对我的mat表应用分页器和排序？

angular、http、crud、mat-table

我刚刚完成了一个通过http API调用填充自身的mat-table；它正常工作；但现在我试图添加分页和排序，我得到了一个错误(实际上是多个)，比如“属性‘分页器’不存在于类型'any[]'.48 this.dataSource.paginator=this.paginator上；”这是因为我将DataSource定义为'any'；但是我没有办法解决这个问题，因为我的DataSource正在从API中提取数据，并且我不能将数据定义

浏览 12提问于2020-08-04得票数 0

回答已采纳

3回答

表分页器未按预期工作。

json、angular

我从服务器获取数据，数据很好地显示在但分页器不工作，尽管它只是显示。 <div class="mat-elevation-z8"> <tablemat-table [dataSource]="dataSourc

浏览 4提问于2020-04-19得票数 1

回答已采纳

1回答

分页器、排序和过滤不适用于angular material项目

angular、typescript、angular-material、angular7

因此，我在Angular CLI 7上创建了一个项目，并希望将angular材质集成到其中。因此，我添加了表格、分页、扩展、过滤器、排序等模块，即使我已经将它们添加到应用程序模块文件中。分页器排序和筛选不起作用。请你告诉我这里可能出了什么问题，卡住了一段时间。,} from '@angular/material'; import {MatTab

浏览 16提问于2019-05-19得票数 2

回答已采纳

1回答

在angular 7中有两个独立的组件用于表和分页

angular、pagination

我处理过一个表，它具有基于以下链接的分页、排序和筛选属性：https://material.angular.io/components/table/overview。现在，我想创建一个单独的组件，用于分页与表组件交互。我的意思是，当单击分页按钮时，它们可以正常工作，以便更改“每页项目”或“下一页”。

浏览 24提问于2019-01-26得票数 3

回答已采纳

1回答

同一表上的多个分页器

angular、typescript、pagination

我在使用angular材质开发的表格上使用分页。我使用mat-paginator对表进行了分页，如下所示：https://material.angular.io/components/paginator/overview 它在我的表上使用一个分页器就可以很好地工作{MatPaginator, MatTableDataSource} from '@angular/<e

浏览 27提问于2019-04-08得票数 0

6回答

MatSort未定义-角度5

angular、angular-material、angular5

我正在尝试在我的angular应用程序中实现一个材料表。分页和过滤器工作得很好，但是我不能对我的表进行排序。我对MatSort的引用是未定义的。我确实在AppModule中导入了它：import {MatTooltipModule}from '@angular/<

浏览 0提问于2018-06-06得票数 9

1回答

组件与服务之间的交互

angular

我有三个组件:分页器组件(应用程序的组件)和表组件。我用了桌子里的材料，然后用在ts里。用于排序和搜索的表。在应用程序中有一个表数据组件。在分页器组件中。我用材料做布局。但是组件之间的关系有一个问题。{ MatTableDataSource, PageEvent } from import { MatTableModule } from'@angular&#

浏览 1提问于2019-03-02得票数 0

回答已采纳

1回答

分页器页面大小下拉显示不正确

angular、angular-material、angular9、angular-material-table、angular-material-paginator

我正在尝试创建一个具有排序和分页功能的表。当我试图更改应该在一个页面上呈现的元素数时，分页器的行为方式很奇怪。如果单击下拉列表，它会将下拉列表的内容呈现在表下面。(见屏幕截图)(如果我单击5、10、25或100，它会选择正确的编号并设置分页器，因此提供了功能)守则：app.module： declarations{ position: 2 }, { position: 4 },

浏览 3提问于2020-05-11得票数 1

回答已采纳

2回答

要表的对象列表

angular

, type: "fruit"}, {name: "carrot", type: "vegetable"}table_headers= Object.keys(data[0]) //gives me an array ["name", "type"] 我用来呈现这个的代码(component.html) <tab

浏览 21提问于2020-08-22得票数 1

1回答

角材料分页不显示，但正在工作

angular、material-table、angular-material-table

我使用导入的材料分页模块，我把资料分页的标签放在表中，我注意到，如果我在标签内更改pageSizeOptions，显示的元素数量会发生变化，但是分页器本身根本没有显示，我已经尝试将分页器设置为静态，在ngOnInit和AfterInit中对它使用setter函数，尝试获取我使用服务检索的数据大小，但不工作。Table.components.html <table mat-table [dataSource]="dataSource&qu

浏览 2提问于2022-03-25得票数 0

1回答

我似乎无法异步地将一行添加到@转角/材料:表原理图的表中。

javascript、angular、typescript、asynchronous、angular-material

当使用@angular/material:table原理图时，我似乎无法异步添加行。调用this.table.renderRows()不会改变这种行为。当"works“部分明显地添加到表中(并增加分页器上的行数)时，异步添加的”不工作“只显示为在分页器行计数上增加的数字，而不是作为新行添加。我不可能是唯一一个想要实现这一目标的人，所以这可能是因为我采取了错误的方法。正确的方法是什么？复制： ng new stackoverflow1

浏览 0提问于2020-11-06得票数 0

1回答

无法使角Material2表排序和分页器工作

angular、angular-material2

我一直试图在我的材料表上实现排序和分页器，但没有成功。import {MatSort, MatPaginator, MatTableDataSource} from '@angular/material'; import {SelectionModel这一

浏览 0提问于2018-02-27得票数 0

回答已采纳

1回答

尝试在角8中实现matSort，但排序未定义

angular、angular-material

试图在表上实现mat排序，但排序是未定义的。我试过了在文档中找到的所有东西，但都没有用。'@angular/material/paginator';import { MatTableDataSource} from '@angular/

浏览 1提问于2020-01-19得票数 0

回答已采纳

1回答

如何使用数据表在angular7中设置搜索框、排序和分页

angular、datatable、angular7

您好，在那里，我试图获得在angular7中的分页和搜索过滤器，但我没有得到分页和搜索过滤器我得到排序functionality.and也帮助我获得搜索过滤器的代码。你能帮我解决这个问题吗？这是testm.component.html <ng-container} from &#x

浏览 7提问于2018-12-15得票数 0

1回答

哪些网格与Angular4兼容？主要用于表的排序、过滤

angular、grid-search

尝试使用最适合的ag-grid，package.json是这样的： "ag-grid": "^18.1.2","ag-grid-community": "^14.0.0","@syncfusion/ej2": "^16.3.31",

浏览 7提问于2021-06-26得票数 0

3回答

用反应型阵列分选角材料表

angular、angular-material、material-design、material-table、angular-material-table

以formArray为输入数据源，实现了对角料表的排序/过滤。dataSource = new MatTableDataSource([]);<td mat-cell *matCellDef="let element"> {{ element.value[column]

浏览 2提问于2020-11-21得票数 2

回答已采纳

点击加载更多