我想在我自己的组件中包含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。
如果有人知道如何解决我的问题,我将非常感激!