如何包装Primeng TurboTable组件

时间:2018-02-12 09:15:24

标签: angular typescript primeng

我想在我自己的组件中包含primeng Turbo Table组件,但是无法弄清楚如何在我传递给我的自定义组件的模板中使用primeng pSortIcon和pSortableColumn指令。

<my-table #tableCmp
                    [value]="val"
                    [columns]="columns"
                     sortMode="multiple"
                    [responsive]="true"
                    [paginator]="true"
                    [rows]="10"
                    [lazy]="true"
                    [totalRecords]="totalRecordsLen"
                    [pageLinks]="3"
                    (onLazyLoading)="lazyLoadData($event)"
                    (onSort)="onSort($event)">
                <ng-template pTemplate="header" let-columns>
                  <tr>
                   <th *ngFor="let col of columns" [pSortableColumn]="col.field">
                     {{col.header}}
                     <p-sortIcon [field]="col.field"></p-sortIcon>
                   </th>
                  </tr>
                </ng-template>
                <ng-template pTemplate="body" let-rowData let-columns="columns">
                  <tr>
                   <td *ngFor="let col of columns">
                    {{rowData[col.field]}}
                   </td>
                  </tr>
                 </ng-template>
  </my-table>

这就是我将模板应用于自定义组件的方式:

@ContentChildren(PrimeTemplate) tpl: QueryList<PrimeTemplate>;

ngAfterContentInit() {
    const originalTableNgAfterContentInit = this.table.ngAfterContentInit;
    this.table.ngAfterContentInit = () => {
        this.table.tpl= this.tpl;
        originalTableNgAfterContentInit.call(this.table);
    };
}

当我使用自定义组件时,它会给我以下错误:

  

p-sortIcon / pSortableColumn不是已知元素

在我的模块中,我导入了TableModule,并检查了TableModule是否导出了SortIcon和SortableColumn。

如果有人知道如何解决我的问题,我将非常感激!

0 个答案:

没有答案