[英]How to add pagination in angular material table that bind to API response
I'm new to angular.我是 angular 的新手。 In my project shown list of products and its work correctly.
在我的项目中显示的产品列表及其正常工作。
My HTML code is below:我的 HTML 代码如下:
<table mat-table [dataSource]="list_product" style="width: 20%;">
<!-- id Column -->
<ng-container matColumnDef="id" style="width: 20%;">
<th mat-header-cell *matHeaderCellDef style="align-items: center;"> id </th>
<td mat-cell *matCellDef="let list_product"> {{list_product.id}} </td>
</ng-container>
<!-- description Column -->
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef> Name </th>
<td mat-cell *matCellDef="let list_product"> {{list_product.description}} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
<mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
and my TypeScript code is -我的 TypeScript 代码是 -
import { Component, OnInit,ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { analyzeAndValidateNgModules } from '@angular/compiler';
import { MatPaginator} from '@angular/material/paginator';
import { MatTableDataSource} from '@angular/material/table';
@Component({
selector: 'app-basic',
templateUrl: './basic.component.html',
styleUrls: ['./basic.component.scss']
})
export class BasicComponent implements OnInit {
public list_product:any=[];
displayedColumns: string[] = ['id', 'description'];
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private http:HttpClient) { }
ngOnInit(): void {
this.get_data();
this.list_product.paginator = this.paginator;
}
get_data(){
this.http.get<any>("http://localhost:3000/listp").subscribe(
res => this.list_product = res
)
}
}
Pagination does not work and all of list are shown.分页不起作用,并显示所有列表。 Pagination buttons does not work in html file.
分页按钮在 html 文件中不起作用。
For client side pagination, you can use MatTableDataSource
as the data source for your material table.对于客户端分页,您可以使用
MatTableDataSource
作为材料表的数据源。 It has pagination, sorting and filtering functionality built-in to it.它具有内置的分页、排序和过滤功能。
Try the following -尝试以下 -
list_product
to a MatTableDataSource
type and initialize it with an empty array -list_product
更改为MatTableDataSource
类型并使用空数组对其进行初始化 -public list_product = new MatTableDataSource<any>([]);
get_data()
mehod set the data
property of the data source -get_data()
方法中设置数据源的data
属性 -get_data() {
this.http.get<any>("http://localhost:3000/listp").subscribe(
res => this.list_product.data = res
)
}
paginator
with @ViewChild
-@ViewChild
获取表格paginator
的引用 -@ViewChild(MatPaginator) private paginator: MatPaginator;
AfterViewInit
and once the view initialized, set the paginator
property of the data source -AfterViewInit
并在视图初始化后,设置数据源的paginator
属性 -ngAfterViewInit(): void {
this.list_product.paginator = this.paginator;
}
Your final component code should look something like -您的最终组件代码应类似于 -
export class BasicComponent implements OnInit, AfterViewInit {
public list_product = new MatTableDataSource<any>([]);
displayedColumns: string[] = ['id', 'description'];
@ViewChild(MatPaginator) private paginator: MatPaginator;
constructor(private http:HttpClient) { }
ngOnInit(): void {
this.get_data();
}
get_data(){
this.http.get<any>("http://localhost:3000/listp").subscribe(
res => this.list_product.data = res
);
}
ngAfterViewInit(): void {
this.list_product.paginator = this.paginator;
}
}
You should explore the documentation for further details.您应该浏览文档以获取更多详细信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.