覆盖 primeNg 的 DataTable 组件时出现模板解析错误
Template parse errors when overriding DataTable component of primeNg
我想覆盖 primeng
的 DataTable
组件的模板,这就是我的代码的样子:
我的-datatable.component.ts
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');
}
}
my-datatable.component.html,此文件与基本组件具有相同的模板。想法是先运行然后再修改
<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>
我还在 app.module.ts
文件的 declarations
数组中添加了这个新组件。所以,我知道它被包含在内,这就是我收到解析错误的原因。
我在控制台遇到的错误是:
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 ;
pColumnHeaders、pColumnFooters 都是已经通过 DataTableModule
导出的组件。我无法弄清楚如何让这些解析错误消失,我确定我遗漏了一些东西。
非常感谢任何帮助。
更新:
这就是我的 app.module.ts 的样子。我导入了 DataTableModule
、BrowserModule
和 FormsModule
。我可以在我的视图中使用标准的 primeNg 数据表组件,只是无法覆盖它。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
/* PRIME NG */
import {
AutoCompleteModule,
PanelMenuModule,
MenuItem,
MenubarModule,
OverlayPanelModule,
TabViewModule,
ButtonModule,
CodeHighlighterModule,
DropdownModule,
DialogModule,
MultiSelectModule ,
InputTextModule,
TooltipModule,
CheckboxModule,
SplitButtonModule,
RadioButtonModule,
MessagesModule,
ConfirmDialogModule,
ConfirmationService,
AccordionModule,
PanelModule,
FieldsetModule,
CalendarModule,
DataTableModule,
MenuModule,
BreadcrumbModule,
TreeModule,
DomHandler,
ChartModule
} from 'primeng/primeng';
import { ObjectUtils } from '../../node_modules/primeng/components/utils/ObjectUtils';
/* APP-SPECIFIC */
import { WindowRef } from './windowref';
import { routing } from './app.routing';
import { MyDatatableComponent } from './components/my-datatable.component';
@NgModule({
declarations: [
DatatableComponent,
ChartsGraphsComponent,
CsxDatatableComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
AutoCompleteModule,
BrowserAnimationsModule,
PanelMenuModule,
MenubarModule,
OverlayPanelModule,
TabViewModule,
ButtonModule,
CodeHighlighterModule,
DropdownModule,
MultiSelectModule,
DialogModule,
InputTextModule,
TooltipModule,
CheckboxModule,
SplitButtonModule,
RadioButtonModule,
MessagesModule,
ConfirmDialogModule,
AccordionModule,
PanelModule,
FieldsetModule,
CalendarModule,
DataTableModule,
MenuModule,
BreadcrumbModule,
TreeModule,
ChartModule
],
providers: [
DomHandler,
ObjectUtils
],
bootstrap: [AppComponent]
})
export class AppModule { }
您看到此错误是因为您尝试使用的选择器未由其各自的模块导出,因为它们是 PrimeNG 框架的 internal/private 部分的一部分。
如果您尝试使用的选择器未导出,则导入 DataTableModule
没有任何区别。
在 [pColumnHeaders]
的情况下,由 ColumnHeaders
组件在 datatable.ts
中定义,您会看到 ColumnHeaders
组件未在 DataTableModule
定义:
@NgModule({
imports: [CommonModule,SharedModule,PaginatorModule,FormsModule],
exports: [DataTable,SharedModule],
declarations: [DataTable,DTRadioButton,DTCheckbox,ColumnHeaders,ColumnFooters,TableBody,ScrollableView,RowExpansionLoader]
})
export class DataTableModule { }
为了能够使用 [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 { }
我的猜测是这种设计是有意的,您正在尝试使用 'private' 和不属于 API 的未记录的选择器。
您必须问自己的问题是您要实现的目标是什么。 PrimeNG DataTable API provides the interface to do that.
很有可能
我想覆盖 primeng
的 DataTable
组件的模板,这就是我的代码的样子:
我的-datatable.component.ts
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');
}
}
my-datatable.component.html,此文件与基本组件具有相同的模板。想法是先运行然后再修改
<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>
我还在 app.module.ts
文件的 declarations
数组中添加了这个新组件。所以,我知道它被包含在内,这就是我收到解析错误的原因。
我在控制台遇到的错误是:
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 ;
pColumnHeaders、pColumnFooters 都是已经通过 DataTableModule
导出的组件。我无法弄清楚如何让这些解析错误消失,我确定我遗漏了一些东西。
非常感谢任何帮助。
更新:
这就是我的 app.module.ts 的样子。我导入了 DataTableModule
、BrowserModule
和 FormsModule
。我可以在我的视图中使用标准的 primeNg 数据表组件,只是无法覆盖它。
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
/* PRIME NG */
import {
AutoCompleteModule,
PanelMenuModule,
MenuItem,
MenubarModule,
OverlayPanelModule,
TabViewModule,
ButtonModule,
CodeHighlighterModule,
DropdownModule,
DialogModule,
MultiSelectModule ,
InputTextModule,
TooltipModule,
CheckboxModule,
SplitButtonModule,
RadioButtonModule,
MessagesModule,
ConfirmDialogModule,
ConfirmationService,
AccordionModule,
PanelModule,
FieldsetModule,
CalendarModule,
DataTableModule,
MenuModule,
BreadcrumbModule,
TreeModule,
DomHandler,
ChartModule
} from 'primeng/primeng';
import { ObjectUtils } from '../../node_modules/primeng/components/utils/ObjectUtils';
/* APP-SPECIFIC */
import { WindowRef } from './windowref';
import { routing } from './app.routing';
import { MyDatatableComponent } from './components/my-datatable.component';
@NgModule({
declarations: [
DatatableComponent,
ChartsGraphsComponent,
CsxDatatableComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
routing,
AutoCompleteModule,
BrowserAnimationsModule,
PanelMenuModule,
MenubarModule,
OverlayPanelModule,
TabViewModule,
ButtonModule,
CodeHighlighterModule,
DropdownModule,
MultiSelectModule,
DialogModule,
InputTextModule,
TooltipModule,
CheckboxModule,
SplitButtonModule,
RadioButtonModule,
MessagesModule,
ConfirmDialogModule,
AccordionModule,
PanelModule,
FieldsetModule,
CalendarModule,
DataTableModule,
MenuModule,
BreadcrumbModule,
TreeModule,
ChartModule
],
providers: [
DomHandler,
ObjectUtils
],
bootstrap: [AppComponent]
})
export class AppModule { }
您看到此错误是因为您尝试使用的选择器未由其各自的模块导出,因为它们是 PrimeNG 框架的 internal/private 部分的一部分。
如果您尝试使用的选择器未导出,则导入 DataTableModule
没有任何区别。
在 [pColumnHeaders]
的情况下,由 ColumnHeaders
组件在 datatable.ts
中定义,您会看到 ColumnHeaders
组件未在 DataTableModule
定义:
@NgModule({
imports: [CommonModule,SharedModule,PaginatorModule,FormsModule],
exports: [DataTable,SharedModule],
declarations: [DataTable,DTRadioButton,DTCheckbox,ColumnHeaders,ColumnFooters,TableBody,ScrollableView,RowExpansionLoader]
})
export class DataTableModule { }
为了能够使用 [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 { }
我的猜测是这种设计是有意的,您正在尝试使用 'private' 和不属于 API 的未记录的选择器。
您必须问自己的问题是您要实现的目标是什么。 PrimeNG DataTable API provides the interface to do that.
很有可能