Javascript 角度9：这两种分页实现之间有什么区别？

我是angular的新手，我尝试创建一个带有分页的表，数据从服务器返回，所以我不想将所有数据放在一起（因为我可能有数千行），那么您更喜欢哪种分页类型？ 我发现了这两种实现： 第一:

第二：

<mat-paginator [length]="length"
               [pageSize]="pageSize"
               [pageSizeOptions]="pageSizeOptions"
               (page)="pageEvent = $event">
</mat-paginator> 

我认为第二个更好，但我不知道如何使用它。请帮助我并告诉我如何仅在更改分页器时才从服务器获取数据，例如，在开始时，它仅从服务器获取5行，当我转到下一页时，它从服务器获取另外5行

---

如果您能给我一个简单的例子或一个链接，尽可能容易理解。

您在表数据源中的实现在这里很重要。您可以使用此分页

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

如果您想在更改pagesize时获取数据，可以定义如下代码

pageIndex: number; pageSize: number;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: false }) sort: MatSort;
@ViewChild(MatTable, { static: false }) table: MatTable<any>;

ngAfterViewInit() {
    setTimeout(() => {
      this.pageIndex = this.paginator.pageIndex;
      this.pageSize = this.paginator.pageSize;
      this.paginator.page.subscribe(res => {
        this.pageIndex = res.pageIndex;
        this.pageSize = res.pageSize;
        this.getTransactions();
      });
      
      this.getTransactions();
    });
  }

 getTransactions() {
      //  Here you can get the data
      this.dataSource.getData(this.pageIndex.toString(), this.pageSize.toString()); 
      this.paginator.length = this.dataSource.dataLength;
    }

pageIndex:number；页面大小：数字；
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
@ViewChild（MatSort，{static:false}）sort:MatSort；
@ViewChild（MatTable，{static:false}）table:MatTable
->在代码中打开这两个示例（<>在右侧），您将看到如何设置每个属性感谢您的回答！它让我对服务器端分页有了一个清晰的想法，但我有一些问题。第一个问题是：这个getData从哪里来？在this.dataSource.getData（this.pageIndex.toString（）、this.pageSize.toString（））中。这是一种应该在后端实现的方法吗？第二个问题：在this.dataSource.dataLength；中，您指的是dataSource的长度乘以dataLength？getData是您将在其中调用后端的服务方法。数据源的长度是dataLength如果你喜欢这个答案，请投票并接受它！这将有助于我们更好地服务
pageIndex: number; pageSize: number;
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: false }) sort: MatSort;
@ViewChild(MatTable, { static: false }) table: MatTable<any>;

ngAfterViewInit() {
    setTimeout(() => {
      this.pageIndex = this.paginator.pageIndex;
      this.pageSize = this.paginator.pageSize;
      this.paginator.page.subscribe(res => {
        this.pageIndex = res.pageIndex;
        this.pageSize = res.pageSize;
        this.getTransactions();
      });
      
      this.getTransactions();
    });
  }

 getTransactions() {
      //  Here you can get the data
      this.dataSource.getData(this.pageIndex.toString(), this.pageSize.toString()); 
      this.paginator.length = this.dataSource.dataLength;
    }