angular - 扩展的primeng表不显示表的行
问题描述
我想对primengTable
组件进行一些更改。所以我从 primeng 扩展了一个自定义组件Table
。这是我的项目的代码:项目
这是扩展表的代码:
import { Component, ElementRef, NgZone } from '@angular/core';
import { CommonModule } from '@angular/common';
import { Table, TableService } from 'primeng/components/table/table';
import { DomHandler } from 'primeng/components/dom/domhandler';
import { ObjectUtils } from 'primeng/components/utils/objectutils';
import { Subject, Subscription } from 'rxjs';
@Component({
selector: 'app-custom-table',
template: `
<div #container [ngStyle]="style" [class]="styleClass"
[ngClass]="{'ui-table ui-widget': true, 'ui-table-responsive': responsive, 'ui-table-resizable': resizableColumns,
'ui-table-resizable-fit': (resizableColumns && columnResizeMode === 'fit'),
'ui-table-hoverable-rows': (rowHover||selectionMode), 'ui-table-auto-layout': autoLayout}">
<div class="ui-table-loading ui-widget-overlay" *ngIf="loading"></div>
<div class="ui-table-loading-content" *ngIf="loading">
<i [class]="'ui-table-loading-icon pi-spin ' + loadingIcon"></i>
</div>
<div *ngIf="captionTemplate" class="ui-table-caption ui-widget-header">
<ng-container *ngTemplateOutlet="captionTemplate"></ng-container>
</div>
<p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="ui-paginator-top" [alwaysShow]="alwaysShowPaginator"
(onPageChange)="onPageChange($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && (paginatorPosition === 'top' || paginatorPosition =='both')"
[templateLeft]="paginatorLeftTemplate" [templateRight]="paginatorRightTemplate" [dropdownAppendTo]="paginatorDropdownAppendTo"></p-paginator>
<div class="ui-table-wrapper" *ngIf="!scrollable">
<table #table [ngClass]="tableStyleClass" [ngStyle]="tableStyle">
<ng-container *ngTemplateOutlet="colGroupTemplate; context {$implicit: columns}"></ng-container>
<thead class="ui-table-thead">
<ng-container *ngTemplateOutlet="headerTemplate; context: {$implicit: columns}"></ng-container>
</thead>
<tfoot class="ui-table-tfoot">
<ng-container *ngTemplateOutlet="footerTemplate; context {$implicit: columns}"></ng-container>
</tfoot>
<tbody class="ui-table-tbody" [pTableBody]="columns" [pTableBodyTemplate]="bodyTemplate"></tbody>
</table>
</div>
<div class="ui-table-scrollable-wrapper" *ngIf="scrollable">
<div class="ui-table-scrollable-view ui-table-frozen-view" *ngIf="frozenColumns||frozenBodyTemplate" [pScrollableView]="frozenColumns" [frozen]="true" [ngStyle]="{width: frozenWidth}" [scrollHeight]="scrollHeight"></div>
<div class="ui-table-scrollable-view" [pScrollableView]="columns" [frozen]="false" [scrollHeight]="scrollHeight" [ngStyle]="{left: frozenWidth, width: 'calc(100% - '+frozenWidth+')'}"></div>
</div>
<p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="ui-paginator-bottom" [alwaysShow]="alwaysShowPaginator"
(onPageChange)="onPageChange($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && (paginatorPosition === 'bottom' || paginatorPosition =='both')"
[templateLeft]="paginatorLeftTemplate" [templateRight]="paginatorRightTemplate" [dropdownAppendTo]="paginatorDropdownAppendTo"></p-paginator>
<div *ngIf="summaryTemplate" class="ui-table-summary ui-widget-header">
<ng-container *ngTemplateOutlet="summaryTemplate"></ng-container>
</div>
<div #resizeHelper class="ui-column-resizer-helper ui-state-highlight" style="display:none" *ngIf="resizableColumns"></div>
<span #reorderIndicatorUp class="pi pi-arrow-down ui-table-reorder-indicator-up" style="display:none" *ngIf="reorderableColumns"></span>
<span #reorderIndicatorDown class="pi pi-arrow-up ui-table-reorder-indicator-down" style="display:none" *ngIf="reorderableColumns"></span>
</div>
`,
providers: [DomHandler, ObjectUtils, TableService , Table]
})
export class CustomTableComponent extends Table {
constructor(public el: ElementRef,
public domHandler: DomHandler,
public objectUtils: ObjectUtils,
public zone: NgZone,
public tableService: TableService) {
super(el, domHandler,objectUtils, zone, tableService);
}
}
有一些错误,因为在primeng的原始代码中TableModule
他们没有声明和导出两个命名的组件TableBody
,ScrollabelView
所以我自己做了,之后错误就消失了。您无法在 stackblitz 上修复这些错误。我目前的问题是表格没有显示行,我找不到这个问题的原因。它只显示标题,但不显示其他行。这是结果的快照:表
为什么会发生这种情况?
解决方案
我解决了这个问题。我注意到primeng中的所有其他组件在它们的构造函数中TableModule
都有一个实例。Table
所以我应该扩展所有这些组件,而是用CustomTableComponent
. 现在它显示了数据行。这是修改后的代码:custom-primeng
推荐阅读
- html - 用 flexbox 将一个孩子固定在中心
- excel - excel不支持外来字符
- react-native - 是否有任何库或方法可以在 Android 和 iOS 的 React Native 中将视频(mp4、mov)转换为 gif?
- javascript - 通过 Link 在组件之间传递数据
- linux - 企业代理后面的 Linux 上的 dotnet restore、NuGet 和 VS Code 问题
- javascript - 使用标题中的整数作为整数而不是 Varchar 对 Algolia 中的细化列表进行排序
- cmake - 如何使用可移植的 CMake 在 C99 项目中添加和使用资源?
- import - 从 Flutter 中的父目录导入
- c++ - 为什么我不能在主函数中更改一个类的公共变量
- docker - Docker swarm 服务端口未暴露