从 api 获取的数据在 angular material 中分页

Question

我从 api 中获取了 100 多个用户的列表。现在我想在 angular material table.

中实现该数据

是否有可能在前端我在 pageSize 中只显示 10 个用户并且有分页。我试过了，但它显示了所有可用的用户，尽管我已经实现了分页模块。

<mat-paginator [pageSize]="10" showFirstLastButtons></mat-paginator>

在打字稿代码中，我从父组件获取列表。

import {Component, OnInit, ViewChild, Input, OnChanges} from '@angular/core';
import {MatPaginator, MatTableDataSource} from '@angular/material';

@Component({
  selector: 'app-users',
  templateUrl: './users.component.html',
  styleUrls: ['./users.component.scss']
})
export class UsersComponent implements OnInit, OnChanges {
  @Input() users;

  displayedColumns = ['name', 'id'];
  dataSource;

  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor() { }

  ngOnChanges() {
    this.dataSource = new MatTableDataSource<any>(this.users);
  }

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
  }
}

Answer 1

总之我成功了。将分页器放入 ngOnChanges

ngOnChanges() {
    this.dataSource = new MatTableDataSource<any>(this.users);
    this.dataSource.paginator = this.paginator;
}

Answer 2

确实不需要使用 ngOnChanges，但如果使用，则需要在 ngOnChanges too.

中指定 datasource.paginator

此外，在分配给数据源时，请考虑分页器是否可见。

如果你在 ngOnInit 中使用你需要使用 static:true

@ViewChild(MatPaginator,{static:true}) paginator: MatPaginator;

但请记住，在那种情况下分页器不能在 *ngIf 下，否则使用 ngAfterViewInit

顺便说一句，如果你可以访问 API 或者分页器在服务器上 - 而不是在前端，你可以看看

从 api 获取的数据在 angular material 中分页

Pagination in angular material from data fetched from an api

pagination

angular-material2

angular