mat-pagination 和 sort 在 ngx-bootstrap 模式下不起作用

Question

我在 ngx-bootstrap 模式上使用 mat-table 和 mat-pagination 和 mat-sort。 我為模態定義了 HTML 模板和打開模態的 angular 方法

<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

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 流程中建議的不同解決方案，例如

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

並檢查您的界面是否有 mat 表EmployeeAssignmentDTO包含與 employeeAssignmentsTableColumns 中相同的列名