mat 分页器将所有数据加载到 mat table ANGULAR 中的第一页

Question

我正在从后端 asp.net 核心 c# API 加载 JSON 数据到 ANGULAR material table 但问题是整个 100 JSON 行数据加载到第一页我设置了分页器，如下所示：

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

如您所见，分页器应加载前 25 行，但它会在第一页加载所有 100 行。下面是我调用 ASP.NET CORE C# web API 以将 JSON 数据传输到垫子 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

验证 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);

Answer 2

这样做

// 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

mat 分页器将所有数据加载到 mat table ANGULAR 中的第一页

mat paginator loading all data to first page in mat table ANGULAR

c#

pagination

json

angular-material

angular