angular - 为什么 Angular Material 表 mat-paginator pagesize 不起作用?
问题描述
我正在尝试在 Angular 材料设计表上使用分页器,但表中的项目总是大于我在分页器中设置的页面大小。怎么了?甚至 Angular Material 页面上的文档也有同样的问题,请参阅:StackBlitz Angular Material
我已将 html 文件中分页器上的页面大小设置为 5,但它始终显示超过 5 个项目。
也在浏览这个问题,但我不知道我在做什么了。所以希望任何人都可以提供帮助。
我的代码:
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>
解决方案
您必须声明this.data
为MatTableDataSource<GithubIssue>
not asGithubIssue[]
您还必须更新代码以在 this.data 中分配值,如下所示:
this.data = new MatTableDataSource<GithubIssue>(data);
this.data.paginator = this.paginator;
this.data.sort = this.sort;
推荐阅读
- java - Java REST - 404 资源找不到
- java - 添加按钮、图像等时,它们不会显示在 Android Studio 中
- r - 如何将多个分类(因子)值转换为二进制值?
- asp.net - 为什么使用引导程序调整大小时页脚链接不起作用?
- php - 如何在 PHP 中添加输入指令
- actions-on-google - DialogFlow:成功链接 Google 帐户后 JSON 中缺少“用户”属性
- cjson - cJSON 字段不存在
- c++ - SDL2 加载带有特殊字符的文件
- c# - iTexsharp pdf中表格单元格的不同单元格事件
- android - 为 AndroidViewModel 创建 ViewModelFactory 的正确方法是什么