Mat Paginator在此特定表中不起作用

时间:2020-10-03 17:32:38

标签: angular angular-material mat-tab mat-pagination

enter image description here

您看到数据正确呈现,但是每页的项目未定义,并且搜索输入类型的宽度缩小,但是如果我重新加载页面正确,那怎么办?为什么在我访问此页面以及刷新数据时出现这种有线行为?

enter image description here

打字稿文件的代码-

.ts

   length;
      pageSize = 25;
      pageSizeOptions = [25, 50, 75, 100];
    
      @ViewChild('TABLE') table: ElementRef;
    
      @ViewChild(MatPaginator) paginator: MatPaginator;
    
  ngOnInit() {
      this.adminservice.getClearedStudents();
        this.studentSub = this.adminservice.getClearedStudentsListener().subscribe(result => {
          if (result.length > 0) {
            // tslint:disable-next-line: prefer-for-of
            for (let i = 0; i < result.length; i++) {
              result[i].registrationno = '[ ' + result[i].registrationno + ' ]' ;
            }
            this.dataSource = new MatTableDataSource(result);
            this.dataSource.paginator = this.paginator;
            this.length = result.length;
          }
        });
}

和html文件代码-

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

只有这样,您才能知道其他带有此类表的页面,垫子分页器仅能使我感到困扰,不胜感激,在此先感谢您...

1 个答案:

答案 0 :(得分:1)

您能否检查您是否已在ngAfterviewinitinit中初始化了分页器

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