【问题标题】:mat-paginator length is not working.Not able to set itmat-paginator 长度不起作用。无法设置它
【发布时间】:2021-04-15 01:45:49
【问题描述】:

我试图在点击分页时调用 API。最初,我有 静态设置长度,它工作正常。我能够做一个 分页API调用。然后我尝试动态设置长度 也一样,它也有效,但后来,它停止了工作。请 帮我指出我的错误。 我正在 this.totalEmp 中设置内容的长度,并且也能够在 html 端打印它但是当我尝试设置时 [长度] 的垫子分页器。它对我不起作用。我试图设置 #paginator 在 mat-paginator 中也是如此,但没有看到任何变化。

Below is my implementation



**HTML:**
<mat-paginator 
    [length]="totalEmp"
    [hidden]="normalPagination"
    [pageSize]="2" 
    [pageSizeOptions]="[2]"
    [pageIndex]="pageIndex"
    (page)="pageEvent = getDataByPagination($event)"></mat-paginator>

**.ts file Code**

export class EmpComponent implements OnInit {
 
         dataSource: any;
         totalEmp: number=0;
         normalPagination: boolean;
        
        @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
         @ViewChild(MatSort, { static: true }) sort: MatSort;
        
        ngOnInit() {
            this.getTableContentCount();
          }
        
        
         getTableContentCount() {
            this.myService.CountService().subscribe(
              (response: any) => {
                if (response) {
           
                  this.totalEmp = response;
                  this.getServerData(0,this.totalEmp);
                }
              },
              (error: any) => { }
            );
          }
        
        public getDataByPagination(event?: PageEvent) {
    this.myService.getPaginationService(event).subscribe(
      response => {
        if (response) {
          this.showLoader=true;
          this.normalPagination=false;
          this.total = this.totalEmp;      
          this.allData=response;
          this.dataSource = new MatTableDataSource(this.allData);
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
          this.showLoader=false;
        }
      },
      error => {
        // handle error
      }
    );
    return event;
  }

【问题讨论】:

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


    【解决方案1】:

    错误:您将在每个请求中初始化以下这些行。

    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    

    解决方案:根据您的最佳需要,通过放置一些条件或在ngAfterViewInit 方法中仅初始化这些行一次。

    【讨论】:

    • 是的,这就是原因,我稍后再解释它。顺便说一句,谢谢你的回答:)
    • 很高兴听到这个消息。如果您认为这可以帮助未来的读者,请将此标记为答案。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2021-01-19
    • 2021-04-21
    • 2019-07-08
    • 2019-12-22
    • 1970-01-01
    • 2020-12-01
    • 2019-10-23
    相关资源
    最近更新 更多