angular - mat-pagination 和 sort 在 ngx-bootstrap 模式下不起作用
问题描述
我在 ngx-bootstrap 模式上使用 mat-table 和 mat-pagination 和 mat-sort。我为模态和角度方法定义了 HTML 模板来打开模态
<ng-template #employeeAssignmentsModal>
<div class="modal-header">
<h4 class="modal-title pull-center" style="margin-left: auto">employee Assignments</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- employee Name-->
<div class="row">
<div class="form-inline col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 custom-margin-padding">
<label class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label custom-label">employee:</label>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 custom-data">
{{employee.name}}
</div>
</div>
</div>
<!-- employee Desc-->
<div class="row">
<div class="form-inline col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12 custom-margin-padding">
<label class="col-xs-12 col-sm-12 col-md-3 col-lg-3 col-xl-3 col-form-label custom-label">employee job Description:</label>
<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8 custom-data">
{{employee.jobDescription}}
</div>
</div>
</div>
<!-- employee Assignments table -->
<div class="mat-elevation-z24" >
<div class="row col-12">
<mat-form-field class="col-xs-12 col-sm-12 col-md-6 col-lg-6 col-xl-6 employeeAssignmentsInputFilter ">
<input (keyup)="applyFilter($event)" matInput placeholder="Search sequence numbers" size="10">
</mat-form-field>
</div>
<mat-grid-list cols="1">
<div class="col-12" *ngIf="employeeAssignments!==undefined">
<table [dataSource]="employeeAssignmentsDataSource" mat-table matSort matSortActive="randomizationSheetSequenceNumber" matSortDirection="desc" matSortDisableClear="true">
<ng-container matColumnDef="randomizationSheetSequenceNumber">
<th *matHeaderCellDef mat-header-cell mat-sort-header scope="col" class="custom-table-header">
Sequence Number
</th>
<td *matCellDef="let element" mat-cell>{{element.sequenceNumber}}</td>
</ng-container>
<!-- Slot Filled Column -->
<ng-container matColumnDef="slotFilled">
<th *matHeaderCellDef mat-header-cell mat-sort-header scope="col" class="custom-table-header">
Slot used
</th>
<td *matCellDef="let element" mat-cell> {{element.slotFilled===true?'Yes':'No'}} </td>
</ng-container>
<!-- Slot Filled On Column -->
<ng-container matColumnDef="slotFilledOn">
<th *matHeaderCellDef mat-header-cell mat-sort-header scope="col" class="custom-table-header">
Slot Used On
</th>
<td *matCellDef="let element" mat-cell> {{element.slotFilledOn | date: systemConfig.SYSTEM_DATE_FORMAT: systemConfig.SYSTEM_TIME_ZONE}} </td>
</ng-container>
<!-- Slot Created Column -->
<ng-container matColumnDef="slotCreatedOn">
<th *matHeaderCellDef mat-header-cell mat-sort-header scope="col" class="custom-table-header">
Slot Created On
</th>
<td *matCellDef="let element" mat-cell> {{element.slotCreatedOn | date: systemConfig.SYSTEM_DATE_FORMAT: systemConfig.SYSTEM_TIME_ZONE}} </td>
</ng-container>
<tr *matHeaderRowDef="employeeAssignmentsTableColumns" mat-header-row></tr>
<tr *matRowDef="let row; columns: employeeAssignmentsTableColumns;" mat-row></tr>
</table>
</div>
<mat-paginator #paginator [pageSizeOptions]="[10, 20, 50, 100]" [pageSize]="10" showFirstLastButtons></mat-paginator>
</mat-grid-list>
</div>
</div>
</ng-template>
员工组件.ts
Employee 组件定义如下。
//Get Employee assignments with stratification information
private getEmployeeAssignments()
{
this.employeeAssignments=undefined;
let url = environment.BASE_URL + EMPLOYEE_API_URL + '/find/assignments/' + this.selectedEmployee.id;
this.employeeService.getEmployeeAssignments(url).subscribe(data =>
{
this.employeeAssignments = data;
let employeeAssignments = new MatTableDataSource<EmployeeAssignmentDTO>();
employeeAssignments.data = this.employeeAssignments;
this.employeeAssignmentsDataSource = employeeAssignments;
this.cdr.detectChanges();
this.employeeAssignmentsDataSource.sort=this.sort;
this.employeeAssignmentsDataSource.paginator=this.paginator;
}, error =>
{
this.employeeLoadError = true;
this.employeeLoadErrorMessage = error;
});
}
我尝试使用 StackOver 流程中建议的不同解决方案,例如
- 使用
[hidden]
代替*ngIf
- 用于
ChangeDetectorRef
检测表数据变化 - 定义
ngAfterViewInit
方法如下
ngAfterViewInit()
{
//Apply sort and pagination after view has been initialized.
this.employeeAssignmentsDataSource.sort = this.sort;
this.employeeAssignmentsDataSource.paginator = this.paginator;
}
到目前为止没有任何效果
更新: 根据我的研究,我发现导致此问题的 ngx-boostrap 模态组件
解决方案
请在您的 ts 文件中进行以下更改并尝试:
//Get Employee assignments with stratification information
private getEmployeeAssignments()
{
this.employeeAssignments=undefined;
let url = environment.BASE_URL + EMPLOYEE_API_URL + '/find/assignments/' + this.selectedEmployee.id;
this.employeeService.getEmployeeAssignments(url).subscribe(data =>
{
this.employeeAssignments = data;
// let employeeAssignments = new MatTableDataSource<EmployeeAssignmentDTO>();
// employeeAssignments.data = this.employeeAssignments;
this.employeeAssignmentsDataSource = new MatTableDataSource<EmployeeAssignmentDTO>(this.employeeAssignments); // do changes here
this.employeeAssignmentsDataSource.sort=this.sort;
this.employeeAssignmentsDataSource.paginator=this.paginator;
this.cdr.detectChanges();
}, error =>
{
this.cohortLoadError = true;
this.cohortLoadErrorMessage = error;
});
}
并检查您的界面是否有 mat 表EmployeeAssignmentDTO包含与 employeeAssignmentsTableColumns 中相同的列名
推荐阅读
- mongodb - mongodb 中 $match 和 request.params.id 的问题
- javascript - 单击导航项后导航覆盖不会关闭
- cloudinary - 使用 REST full api 从 Cloudinary 中删除图像
- amazon-web-services - 如何将根域指向 Elastic Beanstalk?
- node.js - 终端不断给出错误:'node: --experimental-workerexport is not allowed in NODE_OPTIONS'
- node.js - Node.js 和 MongoDb 中的队列机制
- python - 在 colab 中上传“.csv”文件时如何解决“EmptyDataError”?
- java - 获取适合矩形内的所有正方形大小?‽?
- acumatica - 如何在另一个选项卡中传递 Artran 行
- python - 使用 Anaconda 安装 OSMnx