angular - 订阅 Angular 材料中 matTable 的 PageSize 和 PageIndex
问题描述
我正在使用有角度的材料表和分页器。我想将 pageSize 和 pageIndex 发送到 BE,这样我就可以从 BE 进行分页,因为我们有大量数据,而这在 FE 中是不可能的。如何订阅 pageSize 更改和 PageIndex 更改并获取用户选择的数字以发送给 BE。
解决方案
您可以按如下方式订阅寻呼机:
@Component({
selector: 'app-list',
templateUrl: './list.component.html',
],
})
export class ListComponent implements AfterViewInit {
@ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
data: MatTableDataSource<any>;
constructor(private http: HttpClient) {}
ngAfterViewInit(): void {
this.data = new MatTableDataSource([]);
this.data.paginator = this.paginator;
this.paginator.pageIndex = 0;
this.paginator.page.pipe(
startWith({}),
switchMap(() => {
const page = this.paginator.pageIndex + 1;
const itemsPerPage = this.paginator.pageSize;
return this.http.get(`api_url?page=${page}&itemsPerPage=${itemsPerPage}`);
}),
map((apiResponseData) => { return apiResponseData;}),
).subscribe((data) => {
this.data= new MatTableDataSource(data);
this.data._updateChangeSubscription();
});
}
}
推荐阅读
- reactjs - 动态路由 React 一次
- python - 为什么在 Python 3.x 的循环中使用 list() 会返回内存错误?
- docker - 对 docker-compose Web 应用程序使用与 localhost 不同的主机名/url
- java - 程序活动主页按钮返回上一个活动
- python - 在python中使用正则表达式提取括号内的单词
- sql - 将保存为 varchar 的日期与 DateTime 进行比较
- go - 使用 /pkg/errors 和 golang 1.13 格式化动词 %w 处理错误
- javascript - Vue复制粘贴功能,Vue列表渲染
- python - Meta 类中的“Verbose_name”和“Ordering”是什么?请解释一下django中的Meta Class
- ruby-on-rails - 运行测试时不断收到“打开的文件太多”