我正在ngx-bootstrap模态上使用带有mat-pagination和mat-sort的mat-table。我为模态和角度方法定义了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>
employee.component.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]代替*ngIfChangeDetectorRef检测表数据更改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<CohortAssignmentDTO>();
// employeeAssignments.data = this.employeeAssignments;
this.employeeAssignmentsDataSource = new MatTableDataSource<CohortAssignmentDTO>(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表CohortAssignmentDTO包含与employeeAssignmentsTableColumns]中相同的列名。