墊分頁器將所有數據加載到墊表 ANGULAR 的第一頁

Question

I am loading JSON data from backend asp.net core c# API to ANGULAR material table but the problem is that the whole 100 JSON rows data load to the first page I have set up the paginator like below:

<mat-paginator showFirstLastButtons [pageSizeOptions]="[25, 50, 100]"></mat-paginator>

如您所見，分頁器應該加載前 25 行，但它會在第一頁上加載所有 100 行。 Below is the method through which I am calling my ASP.NET CORE C# web API to get JSON data to the mat table.

  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
    dataSource : MatTableDataSource<BugsData>;
      selection = new SelectionModel<BugsData>(true, []);
      bugsData:any;
        ngOnInit(){
        this.spinner.show();
        this.http.get('https://localhost:44318/api/Bugs/ListofBugs?projectid='+this.route.snapshot.params['id']+'').subscribe(
            (data:any) => {
              if(data.message!=null){
                this.snackbar.open(data.message, '✖',{
                  duration:4000,
                  horizontalPosition:'center',
                  verticalPosition:'top'
                }),
                this.spinner.hide()
              }else{
                console.log(data);
                this.bugsData=data,
                this.dataSource = new MatTableDataSource<BugsData>(this.bugsData),
                this.dataSource.sort = this.sort,
                this.dataSource.paginator = this.paginator,
                this.spinner.hide()
              }
            }
          )
      
    
        }
        }

這段代碼有什么問題？

Answer 1

像這樣做

// directly create the datasource       
dataSource = new MatTableDataSource<BugsData>();

constructor(){}

ngAfterViewInit() {
// this part MUST be done in afterviewinit
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;
}

在您的訂閱中，您只需執行以下操作：

this.dataSource.data = this.bugsData

Answer 2

驗證this.paginator是否在this.dataSource.paginator = this.paginator; . 我假設由於視圖中的條件它可能沒有被初始化。

在MatTableDataSource之后立即初始化MatPaginator和MatSort如果未初始化它們會導致問題。

您可以嘗試初始化分頁器並在一些超時后進行排序，讓視圖初始化它們。

this.dataSource = new MatTableDataSource<BugsData>(this.bugsData);

setTimeout(() => {
  this.dataSource.sort = this.sort;
  this.dataSource.paginator = this.paginator;
}, 0);