html - 排序和分页不适用于 Angular 5 数据表。
问题描述
我正在尝试在我的项目中使用这个 Angular 材料 5 数据表组件:https ://stackblitz.com/angular/jyerrrrdxrp?file=polyfills.ts ,它具有过滤、排序和分页功能。到目前为止,我的数据已从数据库中正确获取并显示在表格中,但无法进行排序和分页。
我的 HTML:
<app-header></app-header>
<div class="example-header">
<mat-form-field>
<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
</mat-form-field>
</div>
<div *ngIf="dataSource.data.length === 0">
There were no applicants found.
</div>
<div *ngIf="dataSource.data.length > 0">
<div class="example-container mat-elevation-z8">
<mat-table [dataSource]="dataSource" matSort>
<!-- ID Column -->
<ng-container matColumnDef="id">
<mat-header-cell *matHeaderCellDef mat-sort-header> ID </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.applicantId}} </mat-cell>
</ng-container>
<!-- First Name Column -->
<ng-container matColumnDef="fname">
<mat-header-cell *matHeaderCellDef mat-sort-header> First Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.applicantFirstName}} </mat-cell>
</ng-container>
<!-- Last Name Column -->
<ng-container matColumnDef="lname">
<mat-header-cell *matHeaderCellDef mat-sort-header>Last Name </mat-header-cell>
<mat-cell *matCellDef="let row"> {{row.applicantLastName}} </mat-cell>
</ng-container>
<!-- Status Column -->
<ng-container matColumnDef="status">
<mat-header-cell *matHeaderCellDef mat-sort-header> Status </mat-header-cell>
<mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.applicantStatus.applicationStatusDescription}} </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, 25, 100]"></mat-paginator>
</div>
</div>
我的TS:
import { Component, OnInit, ViewChild } from '@angular/core';
import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
import { APIService } from '../shared/api.service';
import { Router } from '@angular/router';
import { DataService } from '../shared/data.service';
@Component({
selector: 'app-reviewerhome',
templateUrl: './reviewerhome.component.html',
styleUrls: ['./reviewerhome.component.css']
})
export class ReviewerhomeComponent implements OnInit {
displayedColumns = ['id', 'fname', 'lname', 'status'];
dataSource: MatTableDataSource<ApplicantData>;
datalist:any = [];
ApplicantIndex: any;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
constructor(private apiService: APIService, dataService: DataService, private router: Router) {
}
ngOnInit() {
this.apiService.getAllApplicants(this.ApplicantIndex).subscribe(datalist => {
console.log('Return from getAllApplicants()');
this.datalist = datalist;
this.dataSource = new MatTableDataSource(datalist.content);
console.log(datalist);
});
}
ngAfterViewInit() {
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
}
applyFilter(filterValue: string) {
filterValue = filterValue.trim(); // Remove whitespace
filterValue = filterValue.toLowerCase(); // Datasource defaults to lowercase matches
this.dataSource.filter = filterValue;
}
}
export interface ApplicantData {
id: number;
fname: string;
lname: string;
status: string;
}
对可能出了什么问题有任何见解吗?
解决方案
问题是我没有在我的 app.module.ts 中导入 MatSortModule 和 MatPaginatorModule。
imports: [
MatSortModule,
MatPaginatorModule
]
一旦我添加它们,它就可以正常工作。
推荐阅读
- list - Kotlin - 按地图列表分组
- reactjs - ReactJS bootstrap - 如何堆叠 2 个导航栏?并使第一个静态和第二个粘在顶部
- c# - 我想编写一个方法将订单更新到订单列表
- javascript - npx 命令和本地 .npmrc 文件“冲突”
- python - 使用 ipywidgets 刷新情节的困难 - 标签和边框丢失
- delphi - 如何通过makefile在Linux中构建Delphi项目?
- php - 如果 PHP 页面保持非活动状态 5 分钟,则断开连接
- python - Ebay API 调用失败
- react-native - 在 tabBarOnPress 上滚动到顶部
- python - 使用其 ID 查看一个特定项目