如何更新 getRangeLabel mat paginator 中的長度

Question

  @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 文件傳遞​​給dataSource.paginator = this.paginator;

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

Answer 1

我假設您只想設置 mat-pagiator 的總長度。 您正在尋找一種將其與組件屬性綁定的方法。 您可以通過將其與 mat-paginator 的 length 輸入屬性綁定來簡單地做到這一點。 請在下面找到實現它所需的代碼：

所需的模板更改：

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

打字稿所需的更改，假設我有一個名為 length 的屬性：

length:number = 120;

請在此處找到工作代碼： https : //stackblitz.com/edit/angular-xofqpn