我是 Angular 的新手。在我的项目中显示的产品列表及其工作正常。
我的 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>
我的 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
)
}
}
分页不起作用,显示所有列表。分页按钮在 html 文件中不起作用。
最佳答案
对于客户端分页,MatTableDataSource
具有内置的分页、排序和过滤功能。
按照以下步骤-
- 使用
MatTableDataSource
类型作为dataSource
并用空数组初始化 - 一旦收到数据,就设置
MatTableDataSource
的data
属性 - 使用
@ViewChild
获取表的paginator
的引用> - 实现
AfterViewInit
,在 View 初始化后设置MatTableDataSource
的paginator
属性
您的最终组件代码应该类似于 -
export class BasicComponent implements OnInit, AfterViewInit {
public list_product = new MatTableDataSource<any>([]); // <-- STEP (1)
displayedColumns: string[] = ['id', 'description'];
@ViewChild(MatPaginator) private paginator: MatPaginator; // <-- STEP (3)
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 // <-- STEP (2)
);
}
ngAfterViewInit(): void {
this.list_product.paginator = this.paginator; // <-- STEP (4)
}
}
您应该探索 the documentation了解更多详情。
关于angular - 如何在绑定(bind)到 API 响应的 Angular Material 表中添加分页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66839002/