角材料 2 - mat-paginator [长度] 问题

Question

我正在尝试将mat-paginator用于我想显示通过 HTTP 调用检索到的数据的表，但我遇到的问题是我无法将分页器的长度设置为我从应用程序接口。在这个例子中，长度在组件中是硬编码的，但这应该不是问题（我也尝试在视图中将它设置为 [length]="100" 并且它不起作用）。这是 HTML：

<mat-table #table1="matSort" [dataSource]="dataSource1" matSort>

   <ng-container matColumnDef="id">
        <mat-header-cell *matHeaderCellDef>
            <mat-checkbox name="all" class="" [checked]="isAllChecked()" (change)="checkAll($event)" *ngIf="bulkView"></mat-checkbox>
        </mat-header-cell>
        <mat-cell *matCellDef="let element"> 
            <mat-checkbox class="" [checked]="isAllRowsSelected" [(ngModel)]="element.state" *ngIf="bulkView"></mat-checkbox>
        </mat-cell>
   </ng-container>

    <ng-container matColumnDef="firstName">
        <mat-header-cell *matHeaderCellDef mat-sort-header="CompanyAgent"> First name </mat-header-cell>
        <mat-cell *matCellDef="let element">
            <img class="personal-data-table__img" src="/assets/app/media/img/users/100_3.jpg" alt="user" width="50" />
                {{element.firstName}} 
        </mat-cell>
    </ng-container>

    <ng-container matColumnDef="lastName">
        <mat-header-cell *matHeaderCellDef mat-sort-header="CompanyEmail"> Last name </mat-header-cell>
            <mat-cell *matCellDef="let element"> {{element.lastName}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="city">
        <mat-header-cell *matHeaderCellDef mat-sort-header="Website"> City </mat-header-cell>
        <mat-cell *matCellDef="let element"> {{element.city}} </mat-cell>
    </ng-container>

    <ng-container matColumnDef="actions">
        <mat-header-cell *matHeaderCellDef>Actions</mat-header-cell>
        <mat-cell *matCellDef="let element"> 
            <span class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill"> 
                <i class="la la-ellipsis-h"></i> 
            </span>
            <span class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" (click)="editPersonalDataItem(element.RecordID)">
                <i class="la la-edit"></i>                      
            </span>
            <span class="btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill"> 
                <i class="la la-trash"></i> 
            </span>
        </mat-cell>
    </ng-container>

    <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

<mat-paginator #paginator1
    [length]="pag1.pageLength"
    [pageSize]="pag1.pageSize"
    [pageSizeOptions]="pag1.pageSizeOptions"
    [pageIndex]="pag1.pageIndex"
    (page)="onPaginateChange1($event)">
</mat-paginator>

和组件：

pag1 = {
    pageSize: 10,
    pageSizeOptions: [5, 10, 20],
    pageIndex: 0,
    pageLength: 100
  };

@ViewChild('paginator1') paginator1: MatPaginator;

this.route.data.subscribe(data => {
    this.personalData = data.users.data.persons;
    this.dataSource1 = new MatTableDataSource(this.personalData);
    this.dataSource1.paginator = this.paginator1;
    console.log('this.paginator1: ', this.paginator1);
});

当我 console.log this.paginator1 时，我可以看到 _length 设置为 100，但是当我打开对象时，我看到浏览器中显示的值 (10)。

数据在浏览器中显示良好，我遇到的唯一问题是分页器始终显示 10 中的 1-10，我希望它显示 x 中的 1-10，其中 x 是我从 API 中获得的总值东西的个数。请指教。谢谢！

Answer 1

@user4676340 的评论是这个问题的正确答案：

Oooooooooooooh 我不知道你在后端有分页，而不是前端！对不起这是我的错。在这种情况下，你的第一个猜测是正确的，除了一件事：你不应该将你的分页器绑定到你的桌子上。因为在您的情况下，分页器与您的表格无关，它只处理数据。我的猜测是这个绑定到表是这里的问题

（我无权将该评论转换为答案，所以这就是它的内容）

Answer 2

This worked for me

<mat-paginator  [length]="length" (page)="getServerData($event)" #paginator [pageSizeOptions]="[5, 10, 20, 50]" showFirstLastButtons></mat-paginator>

Add line

this.length = count;

and remove line

this.dataSource1.paginator = this.paginator1;