Angular 8 Material Table分页并使用API 错误-问题从自定义组件和动态数据进行排序

问题描述 投票：2回答：1
     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
Angular CLI: 8.3.19
Node: 12.13.0
OS: linux x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker
Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.19
@angular-devkit/build-angular     0.803.19
@angular-devkit/build-optimizer   0.803.19
@angular-devkit/build-webpack     0.803.19
@angular-devkit/core              8.3.19
@angular-devkit/schematics        8.3.19
@angular/cdk                      8.2.3
@angular/cli                      8.3.19
@angular/material                 8.2.3
@angular/pwa                      0.803.18
@ngtools/webpack                  8.3.19
@schematics/angular               8.3.19
@schematics/update                0.803.19
rxjs                              6.5.3
typescript                        3.5.3
webpack                           4.39.2

该项目位于Angular 8.3.19上，我使用物料表，并且所有数据都是从Web服务动态获取的（单元格数据和列）。我创建了一个新的共享组件表，该表实现了所有数据并动态创建了每个表。问题是排序和分页不适用于自定义共享组件，但是如果我在每个组件中创建每个表，则分页和排序将正常工作。

在下面看到无效的自定义共享组件表

src / app / shared / components / table / table.component.ts

import { Component, Input, ViewChild, OnInit, AfterViewInit, OnChanges, } from '@angular/core';
import { ColDef } from 'app/core/models/col-def.model';
import { RowAction } from 'app/core/models/row-action.model';
import { ActivatedRoute } from '@angular/router';
import { emitterEvent, EmitterService } from 'app/core/services/emitter.service';
import { localizationKeys } from 'app/core/localization/localization-keys';
import EventDto from 'app/core/models/event-dto.model';
import { SelectionModel, DataSource } from '@angular/cdk/collections';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-table',
  templateUrl: './table.component.html',
  styleUrls: ['./table.component.scss']
})

export class TableComponent implements OnInit, AfterViewInit, OnChanges {
  @Input() dataSource: any[];
  // @Input() dataSource: TableDatasource;
  public data = new MatTableDataSource();
  @Input() selectedGriData: any[];
  @Input() colDefList: ColDef[];
  @Input() columnsToDisplay: any[];
  @Input() rowActions: RowAction[];
  @Input() screenId: string;
  @Input() selectItemCallback: '() => void';
  @Input() rowColumnIdField: string;
  @Input() rowsPerPage = 5;
  @Input() rowsPerPageSelection = [5, 10, 25];
  @Input() showSelectCheckbox = true;
  @ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: false }) sort: MatSort;

  gridEvent = emitterEvent;
  localizationKeysConst = localizationKeys;
  selection = new SelectionModel<TableComponent>(true, []);

  constructor(private emitterService: EmitterService) {
  }

  ngOnInit() {
  /*  this.data = new MatTableDataSource<any>(this.dataSource);
    this.data.paginator = this.paginator;
    this.data.sort = this.sort;*/
  }

  ngOnChanges() {
   this.data = new MatTableDataSource<any>(this.dataSource);
   this.data.paginator = this.paginator;
   this.data.sort = this.sort;
}

  ngAfterViewInit() {
    this.data = new MatTableDataSource<any>(this.dataSource);
    this.data.paginator = this.paginator;
    this.data.sort = this.sort;

  }

  emitEvent(event: string, data: any) {
    const eventDto = new EventDto(event, data);
    this.emitterService.emit(eventDto);
  }
}

src / app / shared / components / table / table.component.html

<div *ngIf="dataSource.length === 0" class="empty-state-container">
  <div class="empty-state">
    <h2 style="opacity:.5;">{{ localizationKeysConst.grid_component.no_data | localize: screenId }}</h2>
  </div>
</div>
<div >
  <mat-table [dataSource]="dataSource" matSort>
    <!-- Checkbox Column -->
    <ng-container matColumnDef="select" *ngIf="showSelectCheckbox">
      <mat-header-cell *matHeaderCellDef class="checkbox">
      </mat-header-cell>
      <mat-cell *matCellDef="let item">
        <mat-checkbox (click)="selectItemCallback(selectedGriData, item)"
          (change)="$event ? selection.toggle(item) : null" [checked]="selection.isSelected(selectedGriData, item)">
        </mat-checkbox>
      </mat-cell>
    </ng-container>
    <!-- Main Data Columns -->
    <ng-container *ngFor="let colDef of colDefList" [matColumnDef]="colDef.bindTo">
    <mat-header-cell mat-sort-header *matHeaderCellDef class="sortable {{ colDef.columnClass }}">
        {{ colDef.displayText | localize: screenId }} 
    </mat-header-cell>
      <mat-cell *matCellDef="let item" (click)="emitEvent(gridEvent.GRID_OPEN_DETAIL, item)" 
      [ngClass]="colDef.cellTemplate?item.cellTemplate:''" class="{{ colDef.columnClass }}">
        <span [tooltip]="item[colDef.tooltipBindTo]">{{item[colDef.bindTo]}}</span>
      </mat-cell>
    </ng-container>
    <!-- column action buttons-->
    <ng-container matColumnDef="col-buttons">
      <mat-header-cell *matHeaderCellDef></mat-header-cell>
      <mat-cell *matCellDef="let item" class='dots'>
        <!-- <button mat-raised-button color="primary"> example
        </button>-->
        <span><i class="icon-options"></i></span>
          <div class='buttons'>
            <button *ngFor="let rowAction of rowActions"
              class="btn {{ rowAction.buttonClass }} btn-xs" type="button"
              (click)="emitEvent(rowAction.gridEvent, item)">
              <span>{{ rowAction.displayText | localize: screenId }}</span>
            </button>
          </div>
      </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
    <mat-row *matRowDef="let item; columns: columnsToDisplay"></mat-row>
  </mat-table>
  <mat-paginator
    [length]="dataSource?.length" 
    [pageSize]="5"
    [pageSizeOptions]="[5, 10, 20, 50]"
    [showFirstLastButtons]="true">
</mat-paginator>
</div>

以及用于使用表共享组件中的所有数据动态创建表的组件

src / app / Patients / components / Patient-list / Patient-list.component.html

<app-table
      [colDefList]="patientsColDef" 
      [columnsToDisplay]="columnsToDisplay"
      [dataSource]="patients"
      [screenId]="appConst.screens.patients_database_screen_id"
      [(selectedGriData)]="selectedPatients" 
      [selectItemCallback]="selectItem"
      [rowColumnIdField]="rowColumnIdField" 
      [rowActions]="patientsRowActions">
    </app-table>

下面看到有效的代码

src / app /患者/组件/患者列表/患者列表.component.ts

private createColumnDefinitions() {
    this.patientsColDef = [
      new ColDef(patientPropertyName.patientNumber, localizationKeys.patients_database_screen.patient_number_label, patientPropertyName.patientNumber, 'patientNumber'),
      new ColDef(patientPropertyName.patient, localizationKeys.patients_database_screen.patient_label, patientPropertyName.patient, 'patientName'),
      new ColDef(patientPropertyName.birthdate, localizationKeys.patients_database_screen.birth_date_label, patientPropertyName.birthdate, 'date'),
      new ColDef(patientPropertyName.bsnNumber, localizationKeys.patients_database_screen.bsn_number_label, patientPropertyName.bsnNumber, 'bsn'),
      new ColDef(patientPropertyName.zipCodeNumber, localizationKeys.patients_database_screen.zip_code_label, patientPropertyName.zipCodeNumber, 'zipCodeNumber'),
      new ColDef(patientPropertyName.familyDoctorName, localizationKeys.patients_database_screen.referrer_label, patientPropertyName.familyDoctorName, 'practitioner'),
      new ColDef(patientPropertyName.location_name, localizationKeys.patients_database_screen.location_label, patientPropertyName.location_name, 'location'),
      new ColDef(patientPropertyName.status, localizationKeys.patients_database_screen.status, patientPropertyName.status,
        patientPropertyName.status, true),
      new ColDef(patientPropertyName.externalNumber, localizationKeys.patients_database_screen.external_number_label,
        patientPropertyName.externalNumber, 'externalNumber'),
    ];
    this.columnsToDisplay = [
      'select',
      patientPropertyName.patientNumber,
      patientPropertyName.patient,
      patientPropertyName.birthdate,
      patientPropertyName.bsnNumber,
      patientPropertyName.zipCodeNumber,
      patientPropertyName.familyDoctorName,
      patientPropertyName.location_name,
      patientPropertyName.status,
      patientPropertyName.externalNumber,
      'col-buttons'
    ];
  }

src / app / Patients / components / Patient-list / Patient-list.component.html

<div>
      <mat-table [dataSource]="data" matSort>
        <!-- Checkbox Column -->
        <ng-container matColumnDef="select">
          <mat-header-cell *matHeaderCellDef class="checkbox">
          </mat-header-cell>
          <mat-cell *matCellDef="let item">
            <mat-checkbox>
            </mat-checkbox>
          </mat-cell>
        </ng-container>
        <!-- // Checkbox Column -->     
        <!-- Main Data Columns -->
        <ng-container *ngFor="let colDef of patientsColDef" [matColumnDef]="colDef.bindTo">
          <mat-header-cell mat-sort-header *matHeaderCellDef class="sortable {{ colDef.columnClass }}">
            {{ colDef.displayText | localize: screenId }}
          </mat-header-cell>
          <mat-cell *matCellDef="let item" (click)="emitEvent(gridEvent.GRID_OPEN_DETAIL, item)"
            [ngClass]="colDef.cellTemplate?item.cellTemplate:''" class="{{ colDef.columnClass }}">
            <span [tooltip]="item[colDef.tooltipBindTo]">{{item[colDef.bindTo]}}</span>
          </mat-cell>
        </ng-container>
        <mat-header-row *matHeaderRowDef="columnsToDisplay"></mat-header-row>
        <mat-row *matRowDef="let item; columns: columnsToDisplay"></mat-row>
        <!-- column action buttons-->
        <ng-container matColumnDef="col-buttons">
          <mat-header-cell *matHeaderCellDef></mat-header-cell>
          <mat-cell *matCellDef="let item" class='dots'>
            <span><i class="icon-options"></i></span>
            <div class='buttons'>
              <button *ngFor="let rowAction of patientsRowActions" class="btn {{ rowAction.buttonClass }} btn-xs"
                (click)="emitEvent(rowAction.gridEvent, item)">
                <span>{{ rowAction.displayText | localize: screenId }}</span>
              </button>
            </div>
          </mat-cell>
        </ng-container>
      </mat-table>
      <mat-paginator [length]="dataSource?.length" [pageSize]="5" [pageSizeOptions]="[5, 10, 20, 50]"
        [showFirstLastButtons]="true">
      </mat-paginator>
    </div>
angular pagination angular-material2 angular-material-table angular-material-paginator
1个回答
0
投票

您得到这个工作了吗？如果是这样，您可以分享如何？我正在尝试做完全相同的事情...谢谢！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.