如何在getRangeLabel垫分页器中更新长度

时间:2020-03-18 20:02:29

标签: javascript angular angular-material

  @Injectable()
  export class MyCustomPaginatorIntl extends MatPaginatorIntl {
     public getRangeLabel = (page: number, pageSize: number, length: number): string => {

                if (length === 0 || pageSize === 0) {
                    return `${this.noRecord}`;
                }
                length = Math.max(length, 0);
                const startIndex = ((page * pageSize) > length) ?
                    (Math.ceil(length / pageSize) - 1) * pageSize :
                    page * pageSize;

                const endIndex = Math.min(startIndex + pageSize, length);
                this.getAndInitTranslations(startIndex, endIndex, length);
                return `${this.totalRecord}`;

            }
    }

我正在尝试更新长度(总记录),即长度为100,是否可以在将分页器称为dataSource.paginator = this.paginator;

之后,将长度值从同一组件中的另一个ts文件传递到getRangeLabel
export class NewComponent implements OnInit(){

    length = 120;
    public ngOnInit() {
          this.dataSource = new MatTableDataSource(this.data);
          this.dataSource.paginator = this.paginator

     //After this can i able to update the getRangeLabel with custom length 120
     }
}

1 个答案:

答案 0 :(得分:4)

我假设您只想设置mat-pagiator的总长度。您正在寻找一种将其与组件属性绑定的方法。您可以通过将其与mat-paginator的length输入属性进行绑定来简单地完成此操作。请在下面找到您需要实现的代码:

需要更改模板:

<mat-paginator [length]="length"
</mat-paginator>

打字稿中需要进行的更改,假设我有一个名为length的属性:

length:number = 120;

请在此处找到工作代码:https://stackblitz.com/edit/angular-xofqpn