mat paginator 将所有数据加载到 mat 表 ANGULAR 的第一页答案

【问题标题】：mat paginator loading all data to first page in mat table ANGULARmat paginator 将所有数据加载到 mat 表 ANGULAR 的第一页
【发布时间】：2021-06-07 00:21:38
【问题描述】：

我正在将 JSON 数据从后端 asp.net core c# API 加载到 ANGULAR 材料表，但问题是整个 100 行 JSON 数据加载到第一页我已经设置了如下分页器：

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

如您所见，分页器应该加载前 25 行，但它会加载第一页上的所有 100 行。下面是我调用我的 ASP.NET CORE C# Web API 以将 JSON 数据获取到 mat 表的方法。

  @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()
              }
            }
          )
      
    
        }
        }

这段代码有什么问题？

【问题讨论】：

如果有人想了解有关此问题代码的更多信息，请告诉我这里有空，并会尽快回复。
能否请您更新包含 mat-table 和 mat-paginator 的 html 代码。
您将整个响应分配给数据源。您应该只将响应的前 (25 / 50 / 100) 项分配给 dataSource。触发下一页时，您需要使用下一个 (25/ 50 /100 ) 项覆盖 dataSource。 Paginator 将不负责加载“n”号。表中的项目。您需要通过加载'n' no 来处理它。每次在表中的项目。
@MaruthiEranki 兄弟，如上所述，如何将数据分配给数据源？？？？

标签： c# json angular pagination angular-material

【解决方案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);

【讨论】：

感谢您的回答，但我已经初始化了上面的 mat paginator 和 mat sort，但我没有将它包含在问题中，您可以看到我现在更新的...
感谢您参与我的问题。

【解决方案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

【讨论】：

我正在尝试这个解决方案，然后告诉你发生了什么......
兄弟这个解决方案对我不起作用。它给了我一个错误。
什么错误？你能显示你的代码吗？因为它在我的项目中工作
这是一个工作示例：stackblitz.com/edit/angular-85ucqc?file=src/app/…
非常感谢兄弟分享这个例子。它解决了我的整个问题。我为解决方案苦苦挣扎了一周。但是再次感谢你为我提供的一切帮助......我现在很高兴......