Question

我想覆盖DataTable的{{1}}组件的模板，这就是我的代码的样子：

我-datatable.component.ts

primeng

my-datatable.component.html ，此文件与基本组件具有相同的模板。想法是先运行然后进行修改

import { Component, OnInit, ElementRef, Renderer2, ChangeDetectorRef } from '@angular/core';
import { DataTable, DomHandler } from 'primeng/primeng';
import { ObjectUtils } from '../../../../node_modules/primeng/components/utils/ObjectUtils'
import { ColumnHeaders } from '../../../../node_modules/primeng/components/datatable/datatable'

@Component({
  selector: 'my-datatable',
  templateUrl: './my-datatable.component.html',
  styleUrls: ['./my-datatable.component.scss']    
})
export class MyDatatableComponent extends DataTable {

    constructor(el: ElementRef, domHandler: DomHandler, renderer: Renderer2, changeDetector: ChangeDetectorRef, objectUtils: ObjectUtils) { 
        super(el, domHandler, renderer, changeDetector, objectUtils);
        console.log('MyDatatableComponent');
    }

}

此外，我已在<div [ngStyle]="style" [class]="styleClass" [style.width]="containerWidth" [ngClass]="{'ui-datatable ui-widget':true,'ui-datatable-reflow':responsive,'ui-datatable-stacked':stacked,'ui-datatable-resizable':resizableColumns,'ui-datatable-scrollable':scrollable}"> <div class="ui-datatable-loading ui-widget-overlay" *ngIf="loading"></div> <div class="ui-datatable-loading-content" *ngIf="loading"> <i class="fa fa-circle-o-notch fa-spin fa-2x"></i> </div> <div class="ui-datatable-header ui-widget-header" *ngIf="header"> <ng-content select="p-header"></ng-content> </div> <p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="ui-paginator-bottom" (onPageChange)="paginate($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && paginatorPosition!='bottom' || paginatorPosition =='both'"></p-paginator> <div class="ui-datatable-tablewrapper" *ngIf="!scrollable"> <table [class]="tableStyleClass" [ngStyle]="tableStyle"> <thead class="ui-datatable-thead"> <tr *ngIf="!headerColumnGroup" class="ui-state-default" [pColumnHeaders]="columns"></tr> <ng-template [ngIf]="headerColumnGroup"> <tr *ngFor="let headerRow of headerColumnGroup.rows" class="ui-state-default" [pColumnHeaders]="headerRow.columns"></tr> </ng-template> </thead> <tfoot *ngIf="hasFooter()" class="ui-datatable-tfoot"> <tr *ngIf="!footerColumnGroup" class="ui-state-default" [pColumnFooters]="columns"></tr> <ng-template [ngIf]="footerColumnGroup"> <tr *ngFor="let footerRow of footerColumnGroup.rows" class="ui-state-default" [pColumnFooters]="footerRow.columns"></tr> </ng-template> </tfoot> <tbody [ngClass]="{'ui-datatable-data ui-widget-content': true, 'ui-datatable-hoverable-rows': (rowHover||selectionMode)}" [pTableBody]="columns"></tbody> </table> </div> <ng-template [ngIf]="scrollable"> <div class="ui-datatable-scrollable-wrapper ui-helper-clearfix" [ngClass]="{'max-height':scrollHeight}"> <div *ngIf="frozenColumns" [pScrollableView]="frozenColumns" frozen="true" [ngStyle]="{'width':this.frozenWidth}" class="ui-datatable-scrollable-view ui-datatable-frozen-view"></div> <div [pScrollableView]="scrollableColumns" [ngStyle]="{'width':this.unfrozenWidth, 'left': this.frozenWidth}" class="ui-datatable-scrollable-view" [virtualScroll]="virtualScroll" (onVirtualScroll)="onVirtualScroll($event)" [ngClass]="{'ui-datatable-unfrozen-view': frozenColumns}"></div> </div> </ng-template> <p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" styleClass="ui-paginator-bottom" [alwaysShow]="alwaysShowPaginator" (onPageChange)="paginate($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && paginatorPosition!='top' || paginatorPosition =='both'"></p-paginator> <div class="ui-datatable-footer ui-widget-header" *ngIf="footer"> <ng-content select="p-footer"></ng-content> </div> <div class="ui-column-resizer-helper ui-state-highlight" style="display:none"></div> <span class="fa fa-arrow-down ui-datatable-reorder-indicator-up" style="position: absolute; display: none;"></span> <span class="fa fa-arrow-up ui-datatable-reorder-indicator-down" style="position: absolute; display: none;"></span> </div>文件的declarations数组中添加了此新组件。所以，我知道它被包含在内，这就是我得到解析错误的原因。

我在控制台中遇到的错误是：

app.module.ts

pColumnHeaders，pColumnFooters是已经通过Unhandled Promise rejection: Template parse errors: Can't bind to 'pColumnHeaders' since it isn't a known property of 'tr'. ("ass="ui-datatable-thead"> <tr *ngIf="!headerColumnGroup" class="ui-state-default" [ERROR ->][pColumnHeaders]="columns"></tr> <ng-template [ngIf]="headerColumnGroup"> "): ng:///AppModule/CsxDatatableComponent.html@14:74 Can't bind to 'pColumnHeaders' since it isn't a known property of 'tr'. (" <tr *ngFor="let headerRow of headerColumnGroup.rows" class="ui-state-default" [ERROR ->][pColumnHeaders]="headerRow.columns"></tr> </ng-template> </thead> "): ng:///AppModule/CsxDatatableComponent.html@16:100 Can't bind to 'pColumnFooters' since it isn't a known property of 'tr'. ("ass="ui-datatable-tfoot"> <tr *ngIf="!footerColumnGroup" class="ui-state-default" [ERROR ->][pColumnFooters]="columns"></tr> <ng-template [ngIf]="footerColumnGroup"> "): ng:///AppModule/CsxDatatableComponent.html@20:74 Can't bind to 'pColumnFooters' since it isn't a known property of 'tr'. (" <tr *ngFor="let footerRow of footerColumnGroup.rows" class="ui-state-default" [ERROR ->][pColumnFooters]="footerRow.columns"></tr> </ng-template> </tfoot> "): ng:///AppModule/CsxDatatableComponent.html@22:100 Can't bind to 'pTableBody' since it isn't a known property of 'tbody'. ("datatable-data ui-widget-content': true, 'ui-datatable-hoverable-rows': (rowHover||selectionMode)}" [ERROR ->][pTableBody]="columns"></tbody> </table> </div> "): ng:///AppModule/CsxDatatableComponent.html@25:137 Can't bind to 'pScrollableView' since it isn't a known property of 'div'. ("-helper-clearfix" [ngClass]="{'max-height':scrollHeight}"> <div *ngIf="frozenColumns" [ERROR ->][pScrollableView]="frozenColumns" frozen="true" [ngStyle]="{'width':this.frozenWid"): ng:///AppModule/CsxDatatableComponent.html@31:41 Can't bind to 'pScrollableView' since it isn't a known property of 'div'. ("ozenWidth}" class="ui-datatable-scrollable-view ui-datatable-frozen-view"></div> <div [ERROR ->][pScrollableView]="scrollableColumns" [ngStyle]="{'width':this.unfrozenWidth, 'left': this.frozenWidt"): ng:///AppModule/CsxDatatableComponent.html@33:19 Can't bind to 'virtualScroll' since it isn't a known property of 'div'. ("is.unfrozenWidth, 'left': this.frozenWidth}" class="ui-datatable-scrollable-view" [ERROR ->][virtualScroll]="virtualScroll" (onVirtualScroll)="onVirtualScroll($event)" [ngClas"): ng:///AppModule/CsxDatatableComponent.html@34:55 ; Zone: <root> ; Task: Promise.then ;导出的所有组件。我无法弄清楚如何使这些解析错误消失，我相信我错过了一些东西。

非常感谢任何帮助。

更新这就是我的app.module.ts的样子。我已导入DataTableModule，DataTableModule和BrowserModule。我可以在我的视图上使用标准的primeNg数据表组件，但是无法覆盖它。

app.module.ts

FormsModule

Answer 1

您会看到此错误，因为您尝试使用的选择器不会被各自的模块导出，因为它们是PrimeNG框架内部/私有部分的一部分。

如果您尝试使用的选择器未导出，则导入DataTableModule将没有任何区别。

对于由[pColumnHeaders]组件在datatable.ts中定义的ColumnHeaders，您会看到ColumnHeaders组件未导出DataTableModule }定义：

@NgModule({
    imports: [CommonModule,SharedModule,PaginatorModule,FormsModule],
    exports: [DataTable,SharedModule],
    declarations: [DataTable,DTRadioButton,DTCheckbox,ColumnHeaders,ColumnFooters,TableBody,ScrollableView,RowExpansionLoader]
})
export class DataTableModule { }

Source of datatable.ts

为了能够使用[pColumnHeaders]选择器，DataTableModule必须导出ColumnHeaders组件，如下所示：

@NgModule({
    imports: [CommonModule,SharedModule,PaginatorModule,FormsModule],
    exports: [DataTable,SharedModule,ColumnHeaders],
    declarations: [DataTable,DTRadioButton,DTCheckbox,ColumnHeaders,ColumnFooters,TableBody,ScrollableView,RowExpansionLoader]
})
export class DataTableModule { }

我的猜测是，这种设计是故意的，并且您正在尝试使用不属于API的“私有”和未记录的选择器。

你必须问自己的问题是你正在努力实现的目标。有可能是PrimeNG DataTable API provides the interface to do that。

重写primeNg

1 个答案: