mat分页和排序在ngx引导模式中不起作用

Question

我在ngx引导模式上使用带有mat分页和mat排序的mat表。我为打开模态的模态和角度方法定义了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">&times;</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

员工组件定义如下。

//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流中建议的不同解决方案，如

1. 使用[hidden]而不是*ngIf
2. 使用ChangeDetectorRef检测表数据更改
3. 定义ngAfterViewInit方法如下

ngAfterViewInit()
{
//Apply sort and pagination after view has been initialized.
this.employeeAssignmentsDataSource.sort = this.sort;
this.employeeAssignmentsDataSource.paginator = this.paginator;
}

到目前为止没有任何效果

更新：根据我的研究，我发现ngx boostrap模态分量导致了这种

Answer 1

请在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;
});
}

并检查您的界面上是否有垫子表EmployeeAssignmentDTO包含与employeeAassignmentTableColumns中相同的列名称