angular - 如何在 Angular Material 6 中为表格创建分页？

Question

嗨，我正在使用 Angular 最新版本。我想在 上显示我的数据mat-table。一切正常，但我的分页在表格中不起作用。所有数据都显示在一页中。

这是我的请求功能

httpPost(url: string, params: Object): Promise<any> {
    const httpOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/x-www-form-urlencoded',
            'token': `${this.token}`
        })
    };

    const str = [];
    for (const p in params) {
        if (params.hasOwnProperty(p)) {
            str.push(encodeURIComponent(p) + '=' + encodeURIComponent(params[p]));
        }
    }

    return this.http.post(this.getAppUrl(url), str.join('&'), httpOptions).toPromise();
}

我dataSource在这样的构造函数中创建。

this.dataSource = new MatTableDataSource();

完成我的请求后将数据推送到this.dataSource.

    this.global.httpPost('address', { userId: this.userInfo.userId }).then((data) => {
        data.result.map((address) => {
            this.ELEMENT_DATA.push({
                id: parseInt(address.id, 10),
                personName: address.name,
                phone: address.mobile,
                address: address.address,
                lat: address.lat,
                lng: address.lon,
                tools: true,
                isAddress: true
            });
        });
        this.dataSource.data = this.ELEMENT_DATA;
    }).catch((error) => {
        this.global.showError(error);
    });

在ngAfterViewInit设置分页器中：

this.dataSource.paginator = this.paginator;

html代码

<mat-table #table [dataSource]="dataSource">
    <!-- Name Column -->
    <ng-container matColumnDef="address">
        <mat-header-cell *matHeaderCellDef fxFlex="80"> آدرس </mat-header-cell>
        <mat-cell *matCellDef="let element" fxFlex="80" [class.bg-theme]="!element.isAddress">
            <div class="AddressInfo">
                <div [class.color-white]="!element.isAddress" class="font-16 text-wrap mb-15">{{element.address}}</div>
                <div>
                    <span [class.color-white]="!element.isAddress" [class.color-grey]="element.isAddress" class="font-12 ml-10 ">
                        <i class="va-center material-icons">account_box</i> {{element.personName}}</span>
                    <span [class.color-white]="!element.isAddress" [class.color-grey]="element.isAddress" class="font-12 ">
                        <i class="va-center material-icons">smartphone</i> {{element.phone}}</span>
                </div>
            </div>
        </mat-cell>
    </ng-container>
    <!-- Symbol Column -->
    <ng-container matColumnDef="tools">
        <mat-header-cell *matHeaderCellDef fxFlex="15"> عملگر </mat-header-cell>
        <mat-cell [class.bg-theme]="!element.isAddress" *matCellDef="let element" fxFlex="15" class="text-center">
            <button (click)="openDialog()" *ngIf="element.isAddress" mat-icon-button color="warn">
                <mat-icon>delete</mat-icon>
            </button>
            <button *ngIf="element.isAddress" (click)="EditNewAddress()" mat-icon-button color="black">
                <mat-icon>edit</mat-icon>
            </button>
        </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 [pageSizeOptions]="[5, 10, 20]" [length]="ELEMENT_DATA.length" [pageSize]="5"></mat-paginator>

标签： angulartypescriptangular-materialmaterial-design