angular - Wie man die Primeng TurboTable-Komponente einbettet
Ich möchte die primeng Turbo Table-Komponente in meine eigene Komponente einbetten, kann aber nicht herausfinden, wie ich die primeng pSortIcon- und pSortableColumn-Direktive in der Vorlage verwenden kann, die ich an meine benutzerdefinierte Komponente übergebe.
<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>
So wende ich Vorlagen auf meine benutzerdefinierte Komponente an:
@ContentChildren(PrimeTemplate) tpl: QueryList<PrimeTemplate>;
ngAfterContentInit() {
const originalTableNgAfterContentInit = this.table.ngAfterContentInit;
this.table.ngAfterContentInit = () => {
this.table.tpl= this.tpl;
originalTableNgAfterContentInit.call(this.table);
};
}
Wenn ich meine benutzerdefinierte Komponente verwende, gibt sie mir den folgenden Fehler:
p-sortIcon/pSortableColumn ist kein bekanntes Element
In meinem Modul habe ich TableModule importiert und ich habe überprüft, dass TableModule SortIcon und SortableColumn exportiert.
Ich wäre sehr dankbar, wenn jemand wüsste, wie man mein Problem löst!