Mat表的Mat分页器不适用于api数据
Mat表的Mat分页器是Angular Material库中的一个组件，用于在前端页面中实现数据的分页显示。它提供了一种简单且易于使用的方式来处理大量数据的分页需求。
Mat分页器的主要特点包括：
- 简单易用：Mat分页器提供了一套简单的API，可以轻松地实现数据的分页功能。只需在HTML模板中添加分页器组件，并绑定相应的数据源和事件处理函数即可。
- 自定义样式：Mat分页器允许开发者自定义分页器的样式，以适应不同的设计需求。可以通过CSS样式表或者Angular Material提供的主题来修改分页器的外观。
- 多种分页模式：Mat分页器支持多种分页模式，包括常规的页码分页、滚动加载分页等。可以根据实际需求选择合适的分页模式。
- 响应式设计：Mat分页器可以自动适应不同的屏幕尺寸和设备类型，确保在不同的环境下都能正常显示和使用。
Mat分页器适用于前端开发中需要对大量数据进行分页展示的场景，例如管理后台的数据列表、新闻资讯网站的文章列表等。
对于使用腾讯云的用户，推荐使用腾讯云的Serverless云函数（SCF）来处理分页数据的后端逻辑。SCF是一种无服务器计算服务，可以帮助开发者快速构建和部署云端应用程序。通过SCF，可以将分页数据的计算和处理逻辑放在云端，减轻前端的负担，提高系统的性能和稳定性。
腾讯云Serverless云函数（SCF）产品介绍链接：https://cloud.tencent.com/product/scf
相关·内容
4回答
在用于分页的mat-table中，sticky-table没有灵活性。在移动后的分页中，不应用css (如图像所示)。我试着给背景颜色，但它不起作用。参考以下代码：
.mat-paginator{
background-color: brown;
color: gold;
font-size: 1rem;
}
.mat-header-cell{
font-size: 1rem;
background-color: brown;
color: gold;
}
.example-container {
height: 4
浏览 5提问于2019-10-09得票数 3
回答已采纳
我使用在我的Angular 5项目中创建网格。我的数据来自于http请求，它被赋给了一个名为dataSourceNew的变量，就像在view.ts文件中一样。这里的dataSourceNew有动态的内容和结构，所以我不会导出任何接口。
this.http.get('http://example.org?,{headers: this.headers})
.subscribe(
res => {
this.displayedColumnsNew = res.record;
this.
浏览 0提问于2018-03-05得票数 11
3回答
我在单html页面中使用了两个角度的材料表。第一个表，数据加载良好与适当的分页。但是在第二个表中，所有的数据加载都没有分页。我在两个页面中都添加了分页功能。我想展示一些关于这方面的代码。
表1分页(工作良好)
<mat-paginator #paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
表2分页(分页不起作用)
<mat-paginator #errorpaginator [pageSizeOptions]="[5, 10
浏览 0提问于2018-12-19得票数 0
回答已采纳
1回答
角质材料2分页器与垫-表初始化
、、、、
我试图使角质材料2分页组件与表组件(mat表指令)一起工作。
我按照mat表文档添加了一个分页器，试图使它们的示例与我现有的工作垫表一起工作。
在component.html中，我有一个工作席表和一个分页器：
<div class="example-container">
<mat-table [dataSource]="dataSource">
// columns and rows
</mat-table>
<mat-paginator #paginator
浏览 1提问于2018-04-25得票数 3
回答已采纳
4回答
在视图中有两个表，并在表中显示一些图表，除了两个表上的分页器之外，一切都正常工作。，它从两个来源获取数据。当上表的分页器单击下表更改数据时，
组件已经使用数据源初始化了分页器和表，
我的Component.ts
export class FinancialMetricsComponent implements OnInit, AfterViewInit {
pageSize = 20;
dataSource: MatTableDataSource<SnowTicket> | null;
utilizationDataSource: MatTableData
浏览 3提问于2019-02-28得票数 6
回答已采纳
1回答
我在使用angular材质开发的表格上使用分页。我使用mat-paginator对表进行了分页，如下所示：https://material.angular.io/components/paginator/overview 它在我的表上使用一个分页器就可以很好地工作。 my_app.ts import { Component, ChangeDetectorRef, ViewChild, Input, OnChanges} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angu
浏览 27提问于2019-04-08得票数 0
我在*ngIf中使用带有分页器和排序的mat表。使用API来检索表数据。 这是组件的typescript代码： export class UserPermissionAdminComponent implements AfterViewInit, OnInit {
dataSource: MatTableDataSource<UserPermission> = new MatTableDataSource<UserPermission>();
columnsToDisplay: string[] = ['id', 'name'
浏览 32提问于2020-12-28得票数 0
2回答
我得到一个从api获取的100+用户列表。现在，我想在角材料表中实现这些数据。
在前端，我是否可以在pageSize中显示10个用户并进行分页。我试过了，但是它显示了所有可用的用户，尽管我已经实现了分页模块。
<mat-paginator [pageSize]="10" showFirstLastButtons></mat-paginator>
在类型记录代码中，我从父组件获得列表。
import {Component, OnInit, ViewChild, Input, OnChanges} from '@angular/core';
浏览 1提问于2018-06-29得票数 0
回答已采纳
1回答
角质材料.压板动态工作台
、、、、
我有一个角度材料的动态表，我使用外部数据库的API收集数据。我试图对表进行分页，但我只找到了带有预定义数据的表的示例，但我无法采用它。
我已经添加了我的HTML和当前的.ts，我所做的唯一的事情就是在表中显示数据，在HTML中我添加了mat-分页器标记来显示它，但是我不知道如何使它在.ts中工作。
这是我的component.ts：
import { Component, OnInit, ViewChild } from '@angular/core';
import { FormGroup, FormBuilder } from '@angular/forms'
浏览 5提问于2021-06-18得票数 0
回答已采纳
5回答
我有一张垫子桌子，每页最多可以显示100个条目。一开始，我在底部有一个垫子分页器工作得很好。现在，我被要求在顶部设置一个分页器，在表的底部设置另一个分页器，这样如果用户正在寻找顶部的条目，就不必一直向下滚动才能到达分页器。
问题是，两个分页器必须链接到同一个数据源。我尝试为每个数据源提供一个不同的id，使用ViewChild获取它们并将它们分配给相同的数据源，但它只适用于其中一个数据源。
main.component.ts：
flights: Flight[] =[];
dataSource = new MatTableDataSource<Flight>(this
浏览 0提问于2019-01-25得票数 5
回答已采纳
2回答
我有一张垫子桌子，每页最多可以显示5/10/15的条目。一开始，我在底部有一个垫子分页器工作得很好。现在，我被要求在顶部设置一个分页器，在表的底部设置另一个分页器，这样如果用户正在寻找顶部的条目，就不必一直向下滚动才能到达分页器。
我试图将两个分页器链接到同一个数据源。但没起作用。因此，试图创建2个数据源，但它也有一个限制。
唯一的限制是底部的分页器不能更改每页的项，因为没有一种方法可以让我控制该属性。
另外，我无法直接设置每个页面属性的页面索引或项(表没有刷新)，所以所有的移动都是通过一些逻辑和分页器方法实现的，比如previousPage()或lastPage()。
有人能帮我吗？我对单一
浏览 0提问于2020-04-03得票数 2
回答已采纳
1回答
从后端发送数据的角分页
、、、
我必须在我的表中有一个分页，后端已经给我带来了我能显示多少数据，但是我不知道如何将它应用到分页中。
红色标记的是如何将它们添加到表中，以便加载数据。
在html中，我不知道如何使它工作。
<mat-paginator length="pagLenght" [pageSize]="10"
aria-label="Select page" >
</mat-paginator>
浏览 4提问于2022-12-01得票数 0
4回答
我正尝试在我的Angular 6中的mat-table中添加分页。我正在使用下面链接中的一些示例。但它不起作用：
看起来mat-table正确地填充了数据，分页器正确地出现在它的下面，但它们无法连接在一起：
正如您所看到的，分页器被设置为每页5条记录，但是表中当前页面上的记录多于当前页上的记录。它还显示0，这进一步表明链接到表失败。
下面是我的html：
<mat-table #table [dataSource]="dataSource" class="animate topMatDataTable”>
…
</mat-
浏览 0提问于2018-12-20得票数 1
我使用角度材料表(mat- table )和分页器(mat- paginator )来渲染大型表格。我想将整个表格(所有页面)导出为CSV。我可以将当前页面导出为CSV，但不能一次导出所有页面。
我不能只是从数据源导出数据，因为模板使用了管道和其他格式，并且我需要导出具有相同的格式。
一种选择是，当用户点击导出时，它将禁用分页，运行导出代码，然后使用正确的当前页面集重新启用分页。但用户会看到屏幕发生变化，浏览器可能需要一些时间才能在屏幕上完全呈现整个巨型表格。在Angular中有没有更有效的方法来做到这一点，我可以在内存中或屏幕外重新生成表组件，这样用户就不会注意到表的变化之类的？
浏览 3提问于2018-09-30得票数 4
35回答
我有两个部件。两者都有mat表和分页器，而分页是为一个组件工作的，而不是为另一个组件工作的，尽管代码是相似的。以下是我的html：
<div class="mat-elevation-z8">
<mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="col1">
<mat-header-cell *matHeaderCellDef mat-sort-header>
浏览 4提问于2018-02-14得票数 88
回答已采纳
1回答
不同表库的角材料分页
、、、
因此，我为我的表使用这个不同的表库，并创建了一个自定义分页器。我想在桌子上用这个分页器-goto。如何使用分页器使表工作。该表是一个自定义表库，因此我不确定如何在分页中使用dataSource。当我单击“下一步”或“上一次”时，我只需要分页来响应。这是分页演示。https://stackblitz.com/edit/mat-paginator-with-goto-5fxwvm?file=src/app/mat-paginator-goto/mat-paginator-goto.component.html
浏览 8提问于2022-01-03得票数 0
回答已采纳
我正在尝试使用MatPaginator，但在html中有一个普通的'table‘标签，而不是'mat-table’。它似乎不起作用，当我查找一些参考资料时，我发现所有与MatPaginator相关的示例都使用了MatTableDataSource。是否强制将两者合并并使用以使分页起作用？
浏览 9提问于2019-12-01得票数 0
回答已采纳
4回答
我有一些问题与我的角度材料申请。我正在使用一个带有分页器的datatable。数据不必排序。 在加载数据时，我显示了一个垫子旋转器 <div *ngIf="schools !== undefined">
<mat-spinner *ngIf="showSpinner" style="margin:0 auto;"></mat-spinner>
<div *ngIf="!showSpinner">
Keine Daten gef
浏览 33提问于2020-01-09得票数 4
回答已采纳
我正在从后端asp.net核心c# API加载JSON数据到角度材料表，但问题是整个100 JSON行数据加载到第一页，我已经设置了如下分页器：
<mat-paginator showFirstLastButtons [pageSizeOptions]="[25, 50, 100]"></mat-paginator>
正如您所看到的，paginator应该加载前25行，但它加载的是第一页上的所有100行。下面是我调用我的ASP.NET核心JSON以将C#数据获取到mat表的方法。
@ViewChild(MatPaginator) paginator:
浏览 23提问于2021-03-09得票数 0
回答已采纳
5回答
我使用角材料表，我需要一个命令按钮和表的页脚行中的分页器，如下所示
我的代码是这样的
<div class="example-table-container mat-elevation-z8">
<table mat-table [dataSource]="dataSource" multiTemplateDataRows>
<!-- DataSource's displayedColumns -->
<ng-container matColumnDef="{{column}}
浏览 2提问于2018-09-13得票数 17
回答已采纳
1回答
我必须重新调整包含Mat Table / Mat分页器的组件，因为我的HTML文件有一个ngIf。熟悉的人都知道，Mat分页器不能使用处理分页器的标准约定，因为数据到达所需的时间太长了。在下面，你会发现当一个表使用了mat分页时，更新的打字脚本就可以工作了。 现在，我需要在同一个组件中有两个带有Mat分页的表。但是，我只能让其中一个正常工作。因为我是Angular的新手，所以我希望有人能帮我指出正确的方向。随着我继续做更多的研究，我会更新我的问题。据我所知，每个组件只能有一个Mat分页实例。 您可以在下面找到可用的Typescript代码： dataSource1 = new MatTab
浏览 48提问于2020-01-21得票数 0
2回答
我在前端使用角质材料分页器。Oracle表在DB中有130万条记录。我一次不能全部获取它们(很明显)，我需要分页器确保显示130 k页面，假设每页有10条记录(130 k* 10 =130万)。但问题在于，物料分页器显示的总记录是MatDataSource中可用的记录数。在我的例子中，我最初获取了30条记录。分页器只显示3页，每页有10条记录。
但是，我如何告诉材料分页器将130 k页和总记录显示为130万页(假设每页有10条记录)而不获取实际数据，除非我进入特定的页面？
任何线索都会很有帮助。
PS - FYI，后端是一个烧瓶REST API。
下面是表组件的HTML和TS代码：- comp
浏览 3提问于2020-05-12得票数 0
回答已采纳
我正在尝试创建一个表组件，用户可以在其中添加要加载到数据中的REST端点。数据应该是任意对象的数组，所以这里不一定有严格的模式。
问题是我无法获得表，它的分页器要等到我在REST端点上发出请求后才能呈现。我有一个可以进行分页的版本，但是在加载数据之前，分页器(和空表)仍然出现。
我尝试过使用AfterViewChecked，以及初始化分页器和表的各种不同位置。
请注意，您不必在模式中输入有效的端点，因为它是从虚拟端点获取的。我尽可能地将模式设置为接近我的默认状态。
component.ts文件：
import { Component, OnInit, ViewChild } from '
浏览 0提问于2019-04-03得票数 0
2回答
我正在从后端资源获取数据，并创建一个角度材料数据表。我一次检索一组50行。
在返回的json对象中，我得到了一个指向接下来50行的链接。如何使用此方法实现分页。文件不太清楚。
list.component.html
<div class="example-container mat-elevation-z8">
<mat-table #table [dataSource]="dataSource">
<ng-container matColumnDef="Identifier">
浏览 0提问于2018-03-23得票数 7
回答已采纳
1回答
我们的项目有十多个具有不同类型数据的表。对于每个表，我们已经使用mat-paginator对目标进行分页。现在，我想添加持久性，以便下次用户打开一个表时，他/她可以查看按与前一次排序相同的方式排序的数据。
我在官方的mat-paginator上找不到任何关于持久性特性的信息。
有人能指出怎样才能更好地实现这样的功能呢？
浏览 4提问于2022-07-24得票数 -1
回答已采纳
4回答
我试图使用mat分页器作为一个表，在该表中，我希望显示通过HTTP检索的数据，但问题是，我不能将分页器的长度设置为从API获得的结果的总数。在本例中，长度在组件中是硬编码的，但它不应该是一个问题(我还试图在视图中将其设置为length="100“，但它不起作用)。下面是HTML：
<mat-table #table1="matSort" [dataSource]="dataSource1" matSort>
<ng-container matColumnDef="id">
<mat-h
浏览 16提问于2017-12-19得票数 4
我有一个带有数据源的mat表，我为它创建了分页，每次您移动到下一页时都会加载接下来的几个条目。我的查询返回结果总数，因此我希望始终在分页器上显示总量(x中有1)，而不是将dataSource的总长度显示为最大长度。
我知道，当您设置dataSource.paginator = this.paginator时，它会自动执行连接，但我想到的任何代码都无法覆盖它。我尝试过链接length="numberOfHits“，但没有。
另外，我不希望单独处理dataSource (这意味着我不会将它连接到分页器)，因为这样，表懒惰就会通过向它添加更多行来加载，而不是通过将页面切换到下一个页面来加载。
浏览 0提问于2019-08-27得票数 1
1回答
当前实现：是在一个api调用中预先加载所有数据，然后加载到mat表中，这就是我到目前为止实现的。对于组件，我调用一个api并将所有数据加载到表中。
所需的实现:当表数据有1000s行时，我想调用api来加载mat表的每一页的数据。
<mat-table [dataSource]="dataSource">
<ng-container *ngFor="let item of headerRow; let i = index" matColumnDef={{headerRow[i]}}>
浏览 1提问于2020-02-14得票数 0
我试图使用mat分页器，其中数据是从提交按钮上的服务动态加载的。由于某种原因，所有数据都加载到第一页，分页似乎不起作用。我还有另一个按钮(refresh)，它将从后端服务获取数据并再次加载表。单击此按钮时，分页工作正常。我已经尝试过在堆栈溢出的其他问题中提供的所有解决方案，但它们似乎都解决不了问题。请参阅下面的相关代码片段，并让我知道您的建议，
<nb-tab tabTitle="Transactions">
<div class="mat-elevation-z8">
<
浏览 3提问于2020-06-10得票数 0
回答已采纳
我正在尝试使角度材料寻呼机在一个表中起作用，该表中的数据来自服务。我遵循了Angular Material文档中的几个教程，但分页程序无法正常工作 来自html组件的代码： <div>
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8 table-left">
<ng-container [matColumnDef]="column" *ngFor="let column of di
浏览 18提问于2021-09-20得票数 0
回答已采纳
1回答
我有以下代码，可以按系过滤教授 <mat-sidenav #sidenav mode="side" [(opened)]="opened">
<div class="depts">
<app-departments (filterByDeptEvent)="filterProfByDept($event)" [depts]="departments"></app-departments>
</div> 这是通过currentItemsToShow属性
浏览 11提问于2020-10-13得票数 0
1回答
我是angular和typescript的新手，我正在尝试建立一个带有分页器的表格。分页器数据集来自REST api。到目前为止，API工作正常，我成功地获得了数据。
不幸的是，分页器目前不起作用。
导入是可以的。在从REST服务获得数据后，我正在分配数据，但仍然收到以下错误消息：
ERROR TypeError: Cannot set property 'paginator' of undefined
我做错了什么？
availableLanguages: ILanguage[];
displayedColumns = ['language'];
d
浏览 6提问于2019-07-07得票数 0
回答已采纳
我有以下实现(Angular 6)。
数据被很好地提取出来，并按预期显示在表中。但是，分页器不起作用。
如下所示：
@ViewChild(MatPaginator) paginator: MatPaginator;
然后在构造函数中：
this.dataSource = new MatTableDataSource([]);
this.requestHttpService.getStuff()
.subscribe(data => {
this.results = data;
this.dataSource
浏览 0提问于2018-10-12得票数 0
我从材料设计中创建了一个mat-table组件，该组件与另一个mat-paginator组件一起可重用。
从组件视图中，我分别使用这两种方法。但是我希望我能得到这两个组件的引用，这样我就可以ViewChild其中的每个组件，表用于matSort，分页器用于分页。
如果我这样做的话：
<custom-paginator #paginator .... />
然后将其检索为：
@ViewChild('paginator') paginator: MatPaginator
this.paginator有引用，但在控制台TypeError: You provided
浏览 0提问于2020-02-26得票数 1
回答已采纳
4回答
我有一张材料表如下：
<table mat-table [dataSource]="dataSource" >
... Rows ...
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator #
浏览 0提问于2019-11-05得票数 2
回答已采纳
1回答
我试图使用Dojo的dGrid代替jqGrid，因为它不能执行多行行数据。dgrid站点有一个示例分页，该样例分页只检索一次数据并多次进行分页。我对此表示关注，因为如果数据已经太大，可能会导致性能问题。我想知道dGrid是否可以在为每个分页请求数据时进行分页。
dojo站点中的源示例。
http://dojofoundation.org/packages/dgrid/tutorials/grids_and_stores/demo/Pagination.html
我检查了分页选项，似乎没有逻辑可以更改商店的行为。
https://github.com/SitePen/dgrid/wiki/Pag
浏览 2提问于2013-12-11得票数 0
回答已采纳
在分页器中使用表。通过http调用绑定数据。版本角5，材料5.0.4
在从服务器获取数据的页面事件上，我尝试记录所有变量中是否有更改，但没有。
它显示的是从页面事件返回的分页长度属性正在增加。
奇怪的是，我还在stackbliz上实现了，以演示并提出github的问题，但在那里，它工作得很好。
相同的代码，相同的版本，但在本地，它并不像预期的那样工作。
还添加了gif来演示。
<mat-paginator #paginator [length]="totalLength"
[pageSize]="limit"
浏览 2提问于2018-04-06得票数 2
回答已采纳
我有2个tables...trying使用2个垫子分页器。 TS文件： @ViewChild('TableOnePaginator') tableOnePaginator: MatPaginator;
@ViewChild('TableTwoPaginator') tableTwoPaginator: MatPaginator;
dataSource = new MatTableDataSource<PeriodicElement>(this.elements);
dataSource1 = new MatTableDataSource<P
浏览 13提问于2020-06-23得票数 0
回答已采纳
1回答
这是组件ts文件
import { MatTableDataSource, MatPaginator } from "@angular/material";
import { FoodService } from "./food.service";
import { Food } from "./food";
@Component({
selector: "app-food",
templateUrl: "./food.component.html",
styleUrls: ["./food.
浏览 0提问于2020-07-29得票数 0
我试图用远程服务器上的mat-table和dataSource来实现一个组件。但数据在表中不可见。
html
<div class="mat-elevation-z8">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
<table mat-table [dataSource]=&#
浏览 0提问于2018-10-02得票数 0
回答已采纳
2回答
我有一个使用spring创建的服务，我试图使用库来显示它的数据。
我的服务允许使用查询参数?page=x&size=y分页，其中page从0开始。
查询的响应返回如下所示的内容：
{
"_embedded": {
"catalogueOrders": [ .... ]
},
"page": {
"size": 20,
"totalElements": 11,
"totalPages": 1,
"number": 0
}
浏览 3提问于2020-05-09得票数 4
回答已采纳
我有一个表，而im试图使用mat-paginator和Angular文档中的说明添加分页，但它总是在第一页加载整个表。
我试过了
setTimeout(() => this.tableDataSource.paginator = this.paginator);
和
ngAfterViewInit() {
this.tableDataSource.paginator = this.paginator;
}
这是我的组件
[...]
displayedColumns: string[] = ['BookTitulo', 'BookAutor', &#
浏览 0提问于2019-06-09得票数 1
2回答
我在MySql表中有一个包含html数据的字段。我以JSON格式获取数据，并提供服务。没问题的。当在模板中显示数据时，它是一个简单的文本。
控制器(Ts)：
export class CursoComponent implements OnInit {
cursos: Cursos[];
constructor(cursosService: CursosService) {
cursosService.obtenerDatos(0, '')
.subscribe(
(data) => { this.cursos = data; con
浏览 1提问于2020-05-20得票数 1
回答已采纳
1回答
我有一个来自端点的数据，并将其放入MatTableDataSource。我能够显示数据，但无法找到更新表的方法，当我想要使用分页或搜索时，什么都没有发生。
当我尝试使用静态数据时，这会更容易，但是对于动态数据，我只能同时显示所有的数据，并注意到能够做更多的事情。
预期的行为是什么？
通过分页器切换页时，表应刷新。
当前的行为是什么？
通过分页器切换页时，表不会刷新。
复制的步骤是什么？
不幸的是，我不能提供一个功能柱塞，因为我使用的数据来自我的后端应用程序。
这是我的当前代码(它只是显示表中的数据，搜索和分页都不起作用)
<mat-form-field>
<mat-l
浏览 1提问于2021-04-12得票数 0
回答已采纳
1回答
角料台服务器端滤波
、、、
我希望在通过HTTP检索数据时可以在这里进行过滤。通过使用正式文档示例，我设法使排序和分页工作。但是我不知道如何在这个例子中添加过滤：
HTML：
<div class="example-container mat-elevation-z8">
<div class="example-loading-shade"
*ngIf="isLoadingResults || isRateLimitReached">
<mat-spinner *ngIf="is
浏览 2提问于2021-04-25得票数 4
我正在实现分页的帮助，在后端API使用角材料分页器。当单击next按钮时，分页器的范围将更新，但一旦列表被呈现，范围将再次显示1-10。这是我的密码：
getNext(event: PageEvent) {
this.applicationService.getNextApplications(event).subscribe((applications: PaginationModel) => {
this.dataSource.data = applications.data;
this.dataSource.data
浏览 4提问于2019-12-04得票数 2
回答已采纳
1回答
我在我的项目中使用了一个角度材料表。表的数据将由父组件通过输入通过。这个很好用。我还想向我的表中添加一个分页器，其中一列应该是可排序的。但是，当设置排序和分页器时，我会得到错误"....can not设置未定义的.sort“。
<div id="table-overflow">
<mat-table [dataSource]="dataSourceLog" class="mat-elevation-z8" matSort matSortDisableClear>
<ng-contain
浏览 0提问于2018-12-02得票数 0
回答已采纳
5回答
我正在实现一个从API中检索信息的席表。
垫子表显示的数据和预期的一样。
垫子分页器坏了。
下面是我使用的代码：
构成部分：
import {DataService} from '../../services/data.service';
import {Component, ViewChild, AfterViewInit, OnInit} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';
@Component
浏览 5提问于2018-05-25得票数 3
回答已采纳
我有一个带有页眉的Mat表，在表下面我添加了一个分页器组件，我已经将分页器组件调整为两个图像中的页脚。
现在的问题是，我希望行是可滚动的，表头和页脚(即分页器组件)要固定在一个地方。
但是目前，如第二个图像所示，如果，我选择10行，那么表的高度会增加，我在主Div上得到滚动。
努力了几个小时，但没能做到，我会把我写的确切的代码，以便它可以是更好的ShowCased。
下面是我的html文件
<div class="outerDiv">
<div class="table-container">
<table mat-table
浏览 2提问于2020-07-15得票数 2
回答已采纳
1回答
我用的是角材质分页器。
<div style=" display:block;">
<mat-table [dataSource]="dataSource" matSort>
<ng-container *ngFor="let col of dataDisplayedColumns" [matColumnDef]="col">
<mat-header-cell class="table-header header-p" *matHeaderCe
浏览 0提问于2019-11-01得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
