Question

我正在尝试在Angular材质设计表上使用分页器，但是表中的项目始终大于我在分页器中设置的页面大小。怎么了？甚至Angular Material页面上的文档也存在相同的问题，请参见：StackBlitz Angular Material

我已将html文件中的分页器上的pagesize设置为5，但它始终显示5个以上的项目。

也曾经浏览过this issue，但是我不知道自己在做什么。因此，希望任何人都能提供帮助。

我的代码：

import { Component, OnInit, ViewEncapsulation, AfterViewInit, ViewChild } from '@angular/core';
import { Router } from '@angular/router';
import { MatSpinner, MatPaginator } from '@angular/material';

import { QuotationService } from './quotation.service';
import { ConfiguratedMachine } from 'app/models/ConfiguratedMachine';
import { merge } from 'rxjs';
import { tap } from 'rxjs/operators';

@Component({
    selector: 'quotation',
    styleUrls: ['./quotation.component.scss'],
    templateUrl: './quotation.component.html',
    encapsulation: ViewEncapsulation.None
})
export class QuotationComponent implements OnInit, AfterViewInit {
    @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
    ngAfterViewInit() {
        this.quotationService.getConfiguratedMachines().subscribe(cm => this.configuratedMachines = cm);
        this.paginator.page.pipe(
                tap(() => this.configuratedMachines)
            ).subscribe();        
    }
    devices: any[];
    configuratedMachines: ConfiguratedMachine[];
    displayedColumns: string[] = ['machineid', 'customer', 'creator', 'created', 'changed', 'id'];
    resultsLength = 0; 

    cols = [
        { field: 'Name', header: 'Machine' },
        { field: 'NameBV', header: 'Klant' },
        { field: 'User', header: 'Gemaakt door' },
        { field: 'CreatedOn', header: 'Aangemaakt op' },
        { field: 'LastChange', header: 'Laatste verandering' },
        { field: 'Id', header: 'Id' }
    ];
    constructor(private quotationService: QuotationService, private router: Router) {
    }

    ngOnInit() {
        this.devices = this.quotationService.getConfigMachines();
    }

    LoadDevice(device) {
        this.quotationService.setChosenDevice(device);
        this.router.navigate(['Offerte', device.Id, 'Form']);
    }
}

HTML

<div class="container-fluid">
    <div class="example-container mat-elevation-z8">
        <table mat-table [dataSource]="configuratedMachines" class="example-table" matSort matSortActive="created" matSortDisableClear matSortDirection="desc">
            <ng-container matColumnDef="machineid">
                <th mat-header-cell *matHeaderCellDef>Machine</th>
                <td mat-cell *matCellDef="let row">{{row.MachineId}}</td>
            </ng-container>
            <ng-container matColumnDef="id">
                <th mat-header-cell *matHeaderCellDef>Configuratie id</th>
                <td mat-cell *matCellDef="let row">{{row.ConfiguratedMachineId}}</td>
            </ng-container>
            <ng-container matColumnDef="creator">
                <th mat-header-cell *matHeaderCellDef>Gemaakt door</th>
                <td mat-cell *matCellDef="let row">{{row.AddedBy}}</td>
            </ng-container>
            <ng-container matColumnDef="customer">
                <th mat-header-cell *matHeaderCellDef>Klant</th>
                <td mat-cell *matCellDef="let row">{{row.Customer.CompanyName}}</td>
            </ng-container>
            <ng-container matColumnDef="created">
                <th mat-header-cell *matHeaderCellDef mat-sort-header disableClear>
                Aangemaakt op
                </th>
                <td mat-cell *matCellDef="let row">{{row.CreationDate | date : 'd-M-y h:mm:ss' : '+0100' : 'nl-nl'}}</td>
            </ng-container>
            <ng-container matColumnDef="changed">
                <th mat-header-cell *matHeaderCellDef>Laatste verandering</th>
                <td mat-cell *matCellDef="let row">{{row.ChangingDate | date : 'd-M-y h:mm:ss' : '+0100' : 'nl-nl'}}</td>
            </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>
        <mat-paginator [length]="configuratedMachines?.length" [pageSize]="10"></mat-paginator>
    </div>  
</div>

Answer 1

您必须将this.data声明为MatTableDataSource<GithubIssue>，而不是GithubIssue[]

还必须更新代码以在this.data中分配值，如下所示：

this.data = new MatTableDataSource<GithubIssue>(data);
this.data.paginator = this.paginator;
this.data.sort = this.sort;

为什么Angular Material表格的mat-paginator页面大小不起作用？

1 个答案: