разбивка на страницы и сортировка не работает в модале ngx- bootstrap - PullRequest
Новая
       43

разбивка на страницы и сортировка не работает в модале ngx- bootstrap

0 голосов
/ 29 апреля 2020

Я использую mat-table с разбивкой по страницам и mat-sort на моде ngx- bootstrap. Я определил шаблон 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>

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, такие как

  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 вызывает это

1 Ответ

0 голосов
/ 29 апреля 2020

Пожалуйста, внесите следующие изменения в ваш файл 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 содержит те же имена столбцов, что и в employeeAssignmentsTableColumns

...