我使用材质组件表来显示数据，并应用排序，过滤和分页。自定义过滤工作正常，我按照提及链接https://v5.material.angular.io/components/table/overview#pagination但我在下面加入了分页是我的代码。 请帮助我错误的地方。
HTML代码
<div class="example-container mat-elevation-z8">
<div class="example-header">
<mat-form-field>
<input matInput type="text" (keyup)="applyComponent($event.target.value)" placeholder="Component" aria-label="Number" [matAutocomplete]="autocom">
<mat-autocomplete #autocom="matAutocomplete">
<mat-option *ngFor="let option of options" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="mar-left">
<input type="text" matInput aria-label="Number" (keyup)="applyRegion($event.target.value)" placeholder="Region" [matAutocomplete]="auto">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let region of regions" [value]="region">
{{ region }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
<mat-form-field class="mar-left">
<input matInput (keyup)="applySector($event.target.value)" placeholder="Sector">
</mat-form-field>
<!-- <button mat-raised-button color="primary" class="button">Search</button> -->
</div>
<mat-table #table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="no">
<mat-header-cell *matHeaderCellDef mat-sort-header class="customWidthClass"> No. </mat-header-cell>
<mat-cell *matCellDef="let grantsearch; let i = index;" class="customWidthClass"> {{i + 1}} </mat-cell>
</ng-container>
<ng-container matColumnDef="component">
<mat-header-cell *matHeaderCellDef mat-sort-header class="customWidth"> Component </mat-header-cell>
<mat-cell *matCellDef="let grantsearch;" class="customWidth"> {{grantsearch.detail.component[0]}} </mat-cell>
</ng-container>
<ng-container matColumnDef="district">
<mat-header-cell *matHeaderCellDef mat-sort-header> District </mat-header-cell>
<mat-cell *matCellDef="let grantsearch;"> {{grantsearch.detail.district[0]}} </mat-cell>
</ng-container>
<ng-container matColumnDef="organization_name">
<mat-header-cell *matHeaderCellDef mat-sort-header>Organization </mat-header-cell>
<mat-cell *matCellDef="let grantsearch;"> {{grantsearch.detail.organization_name[0]}} </mat-cell>
</ng-container>
<ng-container matColumnDef="region">
<mat-header-cell *matHeaderCellDef mat-sort-header class="customWidthRegion"> Region </mat-header-cell>
<mat-cell *matCellDef="let grantsearch;" class="customWidthRegion"> {{grantsearch.detail.region[0]}} </mat-cell>
</ng-container>
<ng-container matColumnDef="sector">
<mat-header-cell *matHeaderCellDef mat-sort-header> Sector </mat-header-cell>
<mat-cell *matCellDef="let grantsearch;"> {{grantsearch.detail.sector[0]}} </mat-cell>
</ng-container>
<ng-container matColumnDef="project_title">
<mat-header-cell *matHeaderCellDef mat-sort-header> Project Title </mat-header-cell>
<mat-cell *matCellDef="let grantsearch;"> {{grantsearch.detail.project_title[0]}} </mat-cell>
</ng-container>
<ng-container matColumnDef="action">
<mat-header-cell *matHeaderCellDef class="customWidthAction"> Action </mat-header-cell>
<mat-cell *matCellDef="let grantsearch" class="customWidthAction">
<i class="material-icons onhover" (click)="open(content,grantsearch.id)">visibility</i>
</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 #paginator
[pageSize]="10"
[pageSizeOptions]="[5, 10, 20]"
[showFirstLastButtons]="true">
</mat-paginator>
<ng-template #content let-c="close" let-d="dismiss">
<div class="section-1">
<div class="container">
<div class="modal-header">
<h4 class="modal-title">Detail</h4>
<button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">Components</th>
<th scope="col">Organization Name</th>
<th scope="col">Project Title</th>
<th colspan="2">Project Description</th>
<th scope="col">District</th>
<th scope="col">Region</th>
<th scope="col">Sector</th>
<th scope="col">Project start date</th>
<th scope="col">Project end date</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{singleitem[20].component}}</td>
<td>{{singleitem[20].organization_name}}</td>
<td>{{singleitem[20].project_title}}</td>
<td colspan="2">{{singleitem[20].project_description}}</td>
<td>{{singleitem[20].district}}</td>
<td>{{singleitem[20].region}}</td>
<td>{{singleitem[20].sector}}</td>
<td>{{singleitem[20].project_start_date}}</td>
<td>{{singleitem[20].project_end_date}}</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close</button>
</div>
</div>
</div>
</ng-template>
</div>
starter.component.ts
@ViewChild(MatSort) sort: MatSort;
@ViewChild(MatPaginator) paginator: MatPaginator;
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
ngOnInit() {
this.subscription = this.grantsearchservice.getStarterApi()
.subscribe(
(grantsearch: any) => {
this.grantsearchs = grantsearch;
this.dataSource = new MatTableDataSource(this.grantsearchs);
console.log(this.grantsearchs);
}
);
}
applyComponent(filterValue: string) {
this.subscription = this.grantsearchservice.getComponentSearch(filterValue)
.subscribe(
(grantsearch: any) => {
this.grantsearchs = grantsearch;
this.dataSource = new MatTableDataSource(this.grantsearchs);
console.log(this.grantsearchs);
}
);
}
applyRegion(filterValue: string) {
this.subscription = this.grantsearchservice.getRegionSearch(filterValue)
.subscribe(
(grantsearch: any) => {
this.grantsearchs = grantsearch;
this.dataSource = new MatTableDataSource(this.grantsearchs);
console.log(this.grantsearchs);
}
);
}
applySector(filterValue: string) {
this.subscription = this.grantsearchservice.getSectorSearch(filterValue)
.subscribe(
(grantsearch: any) => {
this.grantsearchs = grantsearch;
this.dataSource = new MatTableDataSource(this.grantsearchs);
console.log(this.grantsearchs);
}
);
}
}
答案 0 :(得分：0)
使用此链接https://stackblitz.com/angular/epvypoerlaq?file=main.ts希望这有助于您解决此问题。
答案 1 :(得分：0)
component.html
<mat-paginator #pagination [length]="length" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions" (page)="pageEvent = dropDown(component.value,region.value,sector.value,$event)"
#page>
</mat-paginator>
component.ts
pageIndex: number = 1;
pageSize: number = 100;
pageSizeOptions: number[] = [10, 25, 50, 100];
setPagination(length, startIndex, pageSize) {
this.length = length;
this.pageIndex = startIndex;
this.pageSize = pageSize;
}
loadData() {
this.spinnerService.show();
this.subscription = this.grantsearchservice.getStarterApi(this.component, this.region, this.sector, this.pageIndex, this.pageSize)
.subscribe(
(grantsearch: any) => {
this.grantsearchs = grantsearch.body;
this.dataSource = new MatTableDataSource(this.grantsearchs);
this.totalPageSize = grantsearch.headers.get('X-WP-TotalPages');
this.setPagination(grantsearch.headers.get('x-wp-total'), this.pageIndex, this.pageSize);
this.spinnerService.hide();
}
);
}
ngOnInit() {
this.loadData();
}