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

Question

I'm trying to use the paginator on an Angular material design table, but the items in the table are always bigger than the pagesize I set within the paginator. What is wrong? Even the documentation on the Angular Material page has the same problem, see: StackBlitz Angular Material

I've set the pagesize on the paginator within the html file to 5, but it always shows more than 5 items.

Been scanning through this issue aswell, but I don't know what I'm doing anymore. So hopefully anyone can help.

My code:

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

You have to declare this.data as MatTableDataSource<GithubIssue> not as GithubIssue[]

also you have to update your code to assign value in this.data as below:

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