angularjs – 覆盖primeNg的DataTable组件时的模板解析错误（js覆盖方法）

25-02-07 16

本文将带您了解关于angularjs–覆盖primeNg的DataTable组件时的模板解析错误的新内容，同时我们还将为您解释js覆盖方法的相关知识，另外，我们还将为您提供关于Angular2组件*n

本文将带您了解关于angularjs – 覆盖primeNg的DataTable组件时的模板解析错误的新内容，同时我们还将为您解释js覆盖方法的相关知识，另外，我们还将为您提供关于Angular 2组件* ngFor模板解析错误、Angular 2错误：未处理的Promise拒绝：模板解析错误：多个组件：、angular js data-ng-show, data-ng-disabled、Angular PrimeNG Table sticky 案例的实用信息。

本文目录一览：

angularjs – 覆盖primeNg的DataTable组件时的模板解析错误（js覆盖方法）
Angular 2组件* ngFor模板解析错误
Angular 2错误：未处理的Promise拒绝：模板解析错误：多个组件：
angular js data-ng-show, data-ng-disabled
Angular PrimeNG Table sticky 案例

angularjs – 覆盖primeNg的DataTable组件时的模板解析错误（js覆盖方法）

我想覆盖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*ngIf="loading"></div>
  <div*ngIf="loading">
    <i></i>
  </div>
  <div*ngIf="header">
    <ng-content select="p-header"></ng-content>
  </div>
  <p-paginator [rows]="rows" [first]="first" [totalRecords]="totalRecords" [pageLinkSize]="pageLinks" stylehttps://www.jb51.cc/tag/ott/" target="_blank">ottom" (onPageChange)="paginate($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && paginatorPosition!='bottom' || paginatorPosition =='both'"></p-paginator>
  <div*ngIf="!scrollable">
    <table [class]="tableStyleClass" [ngStyle]="tableStyle">
      <thead>
        <tr *ngIf="!headerColumnGroup"[pColumnHeaders]="columns"></tr>
        <ng-template [ngIf]="headerColumnGroup">
          <tr *ngFor="let headerRow of headerColumnGroup.rows"[pColumnHeaders]="headerRow.columns"></tr>
        </ng-template>
      </thead>
      <tfoot *ngIf="hasFooter()">
        <tr *ngIf="!footerColumnGroup"[pColumnFooters]="columns"></tr>
        <ng-template [ngIf]="footerColumnGroup">
          <tr *ngFor="let footerRow of footerColumnGroup.rows"[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[ngClass]="{'max-height':scrollHeight}">
      <div *ngIf="frozenColumns" [pScrollableView]="frozenColumns" frozen="true" [ngStyle]="{'width':this.frozenWidth}"></div>
      <div [pScrollableView]="scrollableColumns" [ngStyle]="{'width':this.unfrozenWidth,'left': this.frozenWidth}"[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" stylehttps://www.jb51.cc/tag/ott/" target="_blank">ottom" [alwaysShow]="alwaysShowPaginator" (onPageChange)="paginate($event)" [rowsPerPageOptions]="rowsPerPageOptions" *ngIf="paginator && paginatorPosition!='top' || paginatorPosition =='both'"></p-paginator>
  <div*ngIf="footer">
    <ng-content select="p-footer"></ng-content>
  </div>

  <divhttps://www.jb51.cc/tag/dis/" target="_blank">display:none"></div>
  <spanhttps://www.jb51.cc/tag/dis/" target="_blank">display: none;"></span>
  <spanhttps://www.jb51.cc/tag/dis/" target="_blank">display: none;"></span>
</div>

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

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

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"[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"[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"[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"[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}"></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}"[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,ChartModule
  ],providers: [
    DomHandler,ObjectUtils
  ],bootstrap: [AppComponent]
})
export class AppModule { }

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

如果未导出您尝试使用的选择器,则导入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 { }

Source of datatable.ts

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

@NgModule({
    imports: [CommonModule,ColumnHeaders],rowexpansionLoader]
})
export class DataTableModule { }

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

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

Angular 2组件* ngFor模板解析错误

角度2我有以下错误：

EXCEPTION: Template parse errors:
Parser Error: Unexpected token . at column 26 in [ngFor let button of modal.buttons] in ModalComponent@11:22 ("">
                        <button type="button"data-dismiss="modal"
                          [ERROR ->]*ngFor="let button of modal.buttons"
                          [ngClass]="button.classes"
                   "): ModalComponent@11:22

这是我的代码：

import {Component} from 'angular2/core';
import {NgFor,NgClass} from 'angular2/common';

import {EventService} from '../services/event.service';

interface Button {
  text: string;
  classes: Array<string>;
  clicked: Function;
}

interface Modal {
  title: string;
  text: string;
  buttons: Array<Button>;
}

@Component({
  selector: 'modal',template:  `<div *ngIf="modal"role="document">
                <div>
                  <div>
                    <button type="button"data-dismiss="modal" aria-label="Close">
                      <span aria-hidden="true">&times;</span>
                    </button>
                    <h4>{{modal.title}}</h4>
                  </div>
                  <div[innerHTML]="modal.text"></div>
                  <div>
                    <button type="button"data-dismiss="modal"
                      *ngFor="let button of modal.buttons"
                      [ngClass]="button.classes"
                    >{{button.text}}</button>
                  </div>
                </div>
              </div>`,directives: [NgFor,NgClass]
})
export class ModalComponent {
  moDalelement: HTMLElement;
  modal: Modal = [...];

  [...]

}

我尝试生成一个模态组件,没有按钮它工作正常.
为什么这是错的？为什么cant角度迭代对象子数组？
我正在寻找几个小时,请帮忙

解决方法

在angular2.rc1 * ngFor的语法已经改变,从* ngFor =“#items in items”到* ngFor =“let item in items”;

您正在使用新语法,但具有旧版本的angular2.我认为它基于你的导入(你引用’angular2 / …’,而不是’@angular / …’).

尝试旧语法或更新到新版本的角度.

Angular 2错误：未处理的Promise拒绝：模板解析错误：多个组件：

我在几个月前使用旧的beta开发了一个Angular2应用程序>到目前为止,我正在将这另一个转移到最新版本(RC5版本),没有任何障碍.直到我收到以下错误：

zone.js:484 Unhandled Promise rejection: Template parse errors:
More than one component: ProductComponent,OverlayComponent ("'noscroll': hideBody}">

我有一个子组件产品组件,它作为app-component的子组件包含在内.我在app.module.ts文件中包含了这两个.

我不确定这个错误意味着什么,并且在网上找不到支持.以下是相关文件：

app.module.ts

import './rxjs-extensions';

import { NgModule }       from '@angular/core';
import { browserModule }  from '@angular/platform-browser';
import { HttpModule }     from '@angular/http';

import { AppComponent }   from './app.component';
import { ProductComponent }   from './components/product.component';
import { OverlayComponent }   from './components/overlay-component';

import { ProductService }   from './services/product.service';
import { CategoryService }   from './services/category.service';
import { Breadcrumb} from "./directives/breadcrumb";
import { CategoryTree } from "./directives/category-tree";
import { Files } from "./directives/files";
import { gallery } from "./directives/gallery";
import { Orderinformation } from "./directives/order-information";




@NgModule({
    imports:      [
        browserModule,HttpModule
    ],declarations: [
        AppComponent,ProductComponent,OverlayComponent,Breadcrumb,CategoryTree,Files,gallery,Orderinformation
    ],providers: [
        ProductService,CategoryService
    ],bootstrap:    [ AppComponent ]

})
export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { Product } from "./classes/Product";
import { ProductService } from "./services/product.service";
import { Category } from "./classes/Category";
import { CategoryService } from "./services/category.service";

@Component({
    selector: 'product-display',templateUrl: './app/views/main-view.html'
})

export class AppComponent {
    title = `St. David's Poultry Supplies`;
    menuLoaded = false;
    hideBody = false;
    productsLoaded = false;
    categories = [];
    selectedCategory = null;
    selectedProduct = Product;
    breadcrumbCategories = [];
    products = [];
    APIError = [];

    constructor(
        private _productService: ProductService,private _categoryService: CategoryService
    ) {

    }

    getProducts(categoryId = 0) {
        var payload = {
            order           : 'asc',order_by        : 'title',category_id     : categoryId,resize          : true,imgHeight       : 200,imgWidth        : 200
        };

        this._productService.getProducts(payload)
            .subscribe(
                products => {this.products = products},error    => {this.APIError = error},()       => {this.productsLoaded = true}
            );
    }

    getCategories() {
        this.productsLoaded = false;
        this._categoryService.getCategories({
            order           : 'asc',order_by        : 'name',parent_id       : 0,//sub_cats        : true,//group_by_parent : true
        })
            .subscribe(
                categories => {this.categories = categories},error      => {this.APIError = error},()         => {
                    this.menuLoaded = true,this.productsLoaded = true
                }
            );
    }

    selectCategory(category: Category) {
        this.selectedCategory = category;
        this.breadcrumbCategories.push(category);
    }
    resetFilters() {
        this.getProducts();
        this.getCategories();
        this.selectedCategory = null;
        this.selectedProduct = null;
    }
    private changeCategory(category: Category):void {
        this.productsLoaded = false;
        this.selectCategory(category);
        this.getProducts(category.id);
    }

    ngOnInit() {
        this.getCategories();
        this.getProducts();
    }
}

product.component.ts

import { Component,Input } from '@angular/core';

import { Product } from "../classes/Product";
import { Category } from "../classes/Category";
import { ProductService } from "../services/product.service";

@Component({
    selector: 'product-view',templateUrl: './app/views/product-view.html'
})

export class ProductComponent {
    @input() products: Product[];
    @input() selectedCategory: Category;
    selectedProduct: Product;
    contentLoaded = false;
    title = "product viewer";
    APIError = [];

    constructor(
        private _productService: ProductService
    ) {
        _productService.emitter.subscribe(
            product  => {
                this.selectedProduct = product;
                this.contentLoaded = true
            }
        );
    }

    selectProduct(product) {
        this.selectedProduct = product;
        this._productService.emitProduct(this.selectedProduct);
    }

    ngAfterContentinit() {
        this.contentLoaded = true;
    }

    private changeSelectedProduct(product,callback) {
        this.selectedProduct = product;
    }
}

之前没有问题,我很难过为什么会发生这个错误.谁能指出我正确的方向？

谢谢

解决方法

您需要使ProductComponent的选择器,OverlayComponent更具体,因此它们不会同时应用,或者将应用程序拆分为多个模块,因此您只能注册应该实际应用于当前模块中的模板的声明.

如果您只有一个模块,那么所有指令的所有组件,指令和管道都将应用于所有组件.

angular js data-ng-show, data-ng-disabled

Freemarker：
<div data-ng-show="searchInfo.showEnd==false">

和

js： $scope.searchInfo = { showEnd==false }; if ($("#type").val() == 3) { $scope.btnURL=true; $scope.btnSP=false; $scope.btnUpdate=false; $scope.btnYR=false; $scope.title = "转成回播室"; // 页面标题 }

Angular PrimeNG Table sticky 案例

PrimeNG Table Sticky 的用法

先牢骚，官方给的代码用在 Angular8 和 RxJS6 版本上有兼容的问题，主要是 RxJS6 有很多 breaking changes，下面贴出来自己验证过成功的代码 - 2019年7月30日 13:15:31

制作指令：


import { Directive, Input, Renderer, ElementRef, AfterViewInit, OnDestroy, OnChanges } from ''@angular/core'';
import { Subscription,fromEvent } from ''rxjs'';

@Directive({
    selector: ''[stickyHeader]''
})

export class StickyHeaderDirective implements AfterViewInit, OnDestroy, OnChanges{

    private windowScrollSubscription: Subscription = null;
    private windowResizeSubscription: Subscription = null;
    private header: any = null;
    private offsetTop: number = 0;
    private lastScroll: number = 0;
    private isSticky: boolean = false;
    private hasHeader: boolean = false;
    private headerTop = 0;
    @Input(''stickyClass'') stickyClass: string = "";
    @Input(''stickyTop'') stickyTop: number = 0;

    constructor(private elementRef: ElementRef, private renderer: Renderer) {

    }

    ngAfterViewInit(): void {
        setTimeout(()=>{
            this.windowScrollSubscription = fromEvent(window, ''scroll'').subscribe(() => this.manageScrollEvent());
            this.windowResizeSubscription = fromEvent(window, ''resize'').subscribe(() => this.updateHeaderSize());
            const headers = this.elementRef.nativeElement.getElementsByTagName(''TR'');
            this.hasHeader = headers.length > 0;
            if (this.hasHeader) {
                this.header = headers[0];
                this.headerTop = this.header.getBoundingClientRect()[''top''];
                this._calcPosition();
            }
        }, 0);
    }

    ngOnDestroy(): void {
        if (this.windowScrollSubscription){
            this.windowScrollSubscription.unsubscribe();
            this.windowScrollSubscription = null;
        }
        if (this.windowResizeSubscription){
            this.windowResizeSubscription.unsubscribe();
            this.windowResizeSubscription = null;
        }
    }

    ngOnChanges(changes)
    {
        if (changes.stickyTop) {
            this._calcPosition();
        }
    }

    private _calcPosition(){
        if (this.hasHeader) {
            const scroll = window.pageYOffset;
            if (this.isSticky && scroll >= this.headerTop) {
                this.header.style.top =  this.stickyTop + ''px'';
            }
        }
    }

    private manageScrollEvent(): void {
        const scroll = window.pageYOffset;
        if (scroll > this.lastScroll && !this.isSticky && scroll >= this.offsetTop) {
            this.setSticky();
        } else if (scroll < this.lastScroll && this.isSticky && scroll <= this.offsetTop) {
            this.unsetSticky();
        }
        this.lastScroll = scroll;
    }

    private setSticky(): void {
        this.isSticky = true;
        this.header.style.position = ''fixed'';
        this.header.style.top =  this.stickyTop + ''px'';
        this.header.style.display = ''table'';
        this.updateHeaderSize();
        this.setClass(true);
    }

    private updateHeaderSize(){
        if (this.isSticky) {
            const tableWidth = this.elementRef.nativeElement.getBoundingClientRect()[''right''] - this.elementRef.nativeElement.getBoundingClientRect()[''left''];
            this.header.style.width = tableWidth + ''px'';
            // update size of TH elements
            const thArray = this.elementRef.nativeElement.getElementsByTagName(''TH'');
            for (let i = 0; i < thArray.length; i++){
                thArray[i].style.width = tableWidth / thArray.length + "px";
            }
            
        }
    }

    private unsetSticky(): void {
        this.isSticky = false;
        this.header.style.position = ''static'';
        this.header.style.width = ''auto'';
        this.header.style.display = ''table-row'';
        this.setClass(false);
    }

    private setStyle(key: string, value: string): void {
        this.renderer.setElementStyle(this.header, key, value);
    }

    private setClass(add: boolean): void {
        if (this.stickyClass){
            this.renderer.setElementClass(this.header, this.stickyClass, add);
        }
    }

}

将制作的指令导入组件所在模块

图片描述

模板中使用 sticky 指令：

图片描述

上面被注释的属性 [stickyTop]=50 可以指定下拉时列头举例屏幕上面的举例

设置 css 样式：

.header{
    height: 50px;
    width: 100%;
    background-color:cornflowerblue;
    color: white;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial;
    line-height: 50px;
    text-align: center;
    border-bottom: 1px solid #666666;
    position: fixed;
    z-index: 1;
    top: 0px;
}
p-dataTable{
    margin-left: 20px;
    margin-top: 50px;
    margin-right: 20px;
    display: block;
}

:host /deep/ p-datatable .stickyHeader{
  box-shadow: 2px 2px 1px #888888;
}

最终效果
纠正官方代码的不兼容问题：

我们今天的关于angularjs – 覆盖primeNg的DataTable组件时的模板解析错误和js覆盖方法的分享已经告一段落，感谢您的关注，如果您想了解更多关于Angular 2组件* ngFor模板解析错误、Angular 2错误：未处理的Promise拒绝：模板解析错误：多个组件：、angular js data-ng-show, data-ng-disabled、Angular PrimeNG Table sticky 案例的相关信息，请在本站查询。

本文标签：