angularjs – 覆盖primeNg的DataTable组件时的模板解析错误

前端之家收集整理的这篇文章主要介绍了angularjs – 覆盖primeNg的DataTable组件时的模板解析错误前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想覆盖primeng的DataTable组件的模板,这就是我的代码的样子:

我-datatable.component.ts

  1. import { Component,OnInit,ElementRef,Renderer2,ChangeDetectorRef } from '@angular/core';
  2. import { DataTable,DomHandler } from 'primeng/primeng';
  3. import { ObjectUtils } from '../../../../node_modules/primeng/components/utils/ObjectUtils'
  4. import { ColumnHeaders } from '../../../../node_modules/primeng/components/datatable/datatable'
  5.  
  6. @Component({
  7. selector: 'my-datatable',templateUrl: './my-datatable.component.html',styleUrls: ['./my-datatable.component.scss']
  8. })
  9. export class MyDatatableComponent extends DataTable {
  10.  
  11. constructor(el: ElementRef,domHandler: DomHandler,renderer: Renderer2,changeDetector: ChangeDetectorRef,objectUtils: ObjectUtils) {
  12. super(el,domHandler,renderer,changeDetector,objectUtils);
  13. console.log('MyDatatableComponent');
  14. }
  15.  
  16. }

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

  1. <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}">
  2. <div class="ui-datatable-loading ui-widget-overlay" *ngIf="loading"></div>
  3. <div class="ui-datatable-loading-content" *ngIf="loading">
  4. <i class="fa fa-circle-o-notch fa-spin fa-2x"></i>
  5. </div>
  6. <div class="ui-datatable-header ui-widget-header" *ngIf="header">
  7. <ng-content select="p-header"></ng-content>
  8. </div>
  9. <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>
  10. <div class="ui-datatable-tablewrapper" *ngIf="!scrollable">
  11. <table [class]="tableStyleClass" [ngStyle]="tableStyle">
  12. <thead class="ui-datatable-thead">
  13. <tr *ngIf="!headerColumnGroup" class="ui-state-default" [pColumnHeaders]="columns"></tr>
  14. <ng-template [ngIf]="headerColumnGroup">
  15. <tr *ngFor="let headerRow of headerColumnGroup.rows" class="ui-state-default" [pColumnHeaders]="headerRow.columns"></tr>
  16. </ng-template>
  17. </thead>
  18. <tfoot *ngIf="hasFooter()" class="ui-datatable-tfoot">
  19. <tr *ngIf="!footerColumnGroup" class="ui-state-default" [pColumnFooters]="columns"></tr>
  20. <ng-template [ngIf]="footerColumnGroup">
  21. <tr *ngFor="let footerRow of footerColumnGroup.rows" class="ui-state-default" [pColumnFooters]="footerRow.columns"></tr>
  22. </ng-template>
  23. </tfoot>
  24. <tbody [ngClass]="{'ui-datatable-data ui-widget-content': true,'ui-datatable-hoverable-rows': (rowHover||selectionMode)}" [pTableBody]="columns"></tbody>
  25. </table>
  26. </div>
  27.  
  28. <ng-template [ngIf]="scrollable">
  29. <div class="ui-datatable-scrollable-wrapper ui-helper-clearfix" [ngClass]="{'max-height':scrollHeight}">
  30. <div *ngIf="frozenColumns" [pScrollableView]="frozenColumns" frozen="true" [ngStyle]="{'width':this.frozenWidth}" class="ui-datatable-scrollable-view ui-datatable-frozen-view"></div>
  31. <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>
  32. </div>
  33. </ng-template>
  34.  
  35. <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>
  36. <div class="ui-datatable-footer ui-widget-header" *ngIf="footer">
  37. <ng-content select="p-footer"></ng-content>
  38. </div>
  39.  
  40. <div class="ui-column-resizer-helper ui-state-highlight" style="display:none"></div>
  41. <span class="fa fa-arrow-down ui-datatable-reorder-indicator-up" style="position: absolute; display: none;"></span>
  42. <span class="fa fa-arrow-up ui-datatable-reorder-indicator-down" style="position: absolute; display: none;"></span>
  43. </div>

我还在app.module.ts文件的声明数组中添加了这个新组件.所以,我知道它被包含在内,这就是为什么我得到一个解析错误的原因.

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

  1. Unhandled Promise rejection: Template parse errors:
  2. Can't bind to 'pColumnHeaders' since it isn't a known property of 'tr'. ("ass="ui-datatable-thead">
  3. <tr *ngIf="!headerColumnGroup" class="ui-state-default" [ERROR ->][pColumnHeaders]="columns"></tr>
  4. <ng-template [ngIf]="headerColumnGroup">
  5. "): ng:///AppModule/CsxDatatableComponent.html@14:74
  6. 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>
  7. </ng-template>
  8. </thead>
  9. "): ng:///AppModule/CsxDatatableComponent.html@16:100
  10. Can't bind to 'pColumnFooters' since it isn't a known property of 'tr'. ("ass="ui-datatable-tfoot">
  11. <tr *ngIf="!footerColumnGroup" class="ui-state-default" [ERROR ->][pColumnFooters]="columns"></tr>
  12. <ng-template [ngIf]="footerColumnGroup">
  13. "): ng:///AppModule/CsxDatatableComponent.html@20:74
  14. 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>
  15. </ng-template>
  16. </tfoot>
  17. "): ng:///AppModule/CsxDatatableComponent.html@22:100
  18. 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>
  19. </table>
  20. </div>
  21. "): ng:///AppModule/CsxDatatableComponent.html@25:137
  22. Can't bind to 'pScrollableView' since it isn't a known property of 'div'. ("-helper-clearfix" [ngClass]="{'max-height':scrollHeight}">
  23. <div *ngIf="frozenColumns" [ERROR ->][pScrollableView]="frozenColumns" frozen="true"
  24. [ngStyle]="{'width':this.frozenWid"): ng:///AppModule/CsxDatatableComponent.html@31:41
  25. 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>
  26. <div [ERROR ->][pScrollableView]="scrollableColumns" [ngStyle]="{'width':this.unfrozenWidth,'left': this.frozenWidt"): ng:///AppModule/CsxDatatableComponent.html@33:19
  27. Can't bind to 'virtualScroll' since it isn't a known property of 'div'. ("is.unfrozenWidth,'left': this.frozenWidth}"
  28. class="ui-datatable-scrollable-view" [ERROR ->][virtualScroll]="virtualScroll" (onVirtualScroll)="onVirtualScroll($event)"
  29. [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

  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
  3. import { NgModule } from '@angular/core';
  4. import { FormsModule } from '@angular/forms';
  5. import { HttpModule } from '@angular/http';
  6.  
  7. /* PRIME NG */
  8. import {
  9. 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
  10. } from 'primeng/primeng';
  11. import { ObjectUtils } from '../../node_modules/primeng/components/utils/ObjectUtils';
  12.  
  13.  
  14. /* APP-SPECIFIC */
  15. import { WindowRef } from './windowref';
  16. import { routing } from './app.routing';
  17. import { MyDatatableComponent } from './components/my-datatable.component';
  18.  
  19.  
  20. @NgModule({
  21. declarations: [
  22. DatatableComponent,ChartsGraphsComponent,CsxDatatableComponent
  23. ],imports: [
  24. BrowserModule,FormsModule,HttpModule,routing,AutoCompleteModule,BrowserAnimationsModule,ChartModule
  25. ],providers: [
  26. DomHandler,ObjectUtils
  27. ],bootstrap: [AppComponent]
  28. })
  29. export class AppModule { }
您会看到此错误,因为您尝试使用的选择器不会由各自的模块导出,因为它们是PrimeNG框架的内部/私有部分的一部分.

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

对于[pColumnHeaders],由ColumnHeaders组件在datatable.ts中定义,您将看到ColumnHeaders组件未在DataTableModule定义中导出:

  1. @NgModule({
  2. imports: [CommonModule,SharedModule,PaginatorModule,FormsModule],exports: [DataTable,SharedModule],declarations: [DataTable,DTRadioButton,DTCheckBox,ColumnHeaders,ColumnFooters,TableBody,ScrollableView,RowExpansionLoader]
  3. })
  4. export class DataTableModule { }

Source of datatable.ts

为了能够使用[pColumnHeaders]选择器,DataTableModule必须像这样导出ColumnHeaders组件:

  1. @NgModule({
  2. imports: [CommonModule,ColumnHeaders],RowExpansionLoader]
  3. })
  4. export class DataTableModule { }

我的猜测是这个设计是有意的,你试图使用不属于API的’私有’和未记录的选择器.

你必须问自己的问题是你想要实现的目标.有可能是PrimeNG DataTable API provides the interface to do that.

猜你在找的Angularjs相关文章