时间戳

首页 > 解决方案 > 有没有办法在不使用 MatTableDataSource 的情况下对材料表进行材料分页？角 10

angular - 有没有办法在不使用 MatTableDataSource 的情况下对材料表进行材料分页？角 10

问题描述

有没有办法在不使用 MatTableDataSource 的情况下对表格进行材料分页？我在网上看到的每个示例都让我使用 MatTableDataSource，但我不确定如何实际使用它。我正在从数据库表中填充我的材料表。

users: any[] = [];
displayData = [];
dataSource = [];
@ViewChild(MatPaginator) paginator: MatPaginator;

constructor(
    private authService: AuthService,
    private userService: UserService,
    private router: Router,
    private httpClient: HttpClient
  ) {}

  ngOnInit(): void {
    this._getUsers();
    
  }

private _getUsers() {
    this.userService;
    this.userService.getUsers().subscribe((data) => {
      this.users = data.users;
      this.displayData = data.users;      
      this.dataSource = this.users;
      
    });

<div class="users">
  <app-extend-table #usersTable
                       [header]="header"
                       [data]="displayData"
                       [columns]="columns">
  </app-extend-table>
  <!-- <mat-paginator [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator> -->
  
</div>

标签： angulartypescript

解决方案

您需要添加[length]="users?.length"并只监听 的page输出事件mat-pagination并在表格中显示相应的项目

像这样。

<mat-paginator (page)="pageChanged($event)" [length]="users?.length" [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>

在 ts

 // import PageEvent from angulat material pagination
pageChanged(event: PageEvent) {
const users = [...this.users];
   this.dataSource = users.splice((event.pageIndex - 1) * event.pageSize, event.pageSize );
}

这是工作示例 https://stackblitz.com/edit/angular-adrxts?file=app/table-pagination-example.ts

推荐阅读