_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
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>
以及使用来自 Table 共享组件的所有数据动态创建表的组件
src/app/患者/组件/患者列表/患者列表.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/患者/组件/患者列表/患者列表.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>