1

Je souhaite ajouter des fonctions de pagination côté serveur à la primitive datable (p-datatable) à plusieurs endroits, j'ai donc déclaré un nouveau composant "pagin-datatable.component "avec les fonctions et le comportement dont j'ai besoin.Angular 4 + primeng: transmettre le contenu HTML d'un composant à un autre

Alors Pagin-datatable.component.html (modèle) est livré avec:

<p-dataTable [value]="value" 
    resizableColumns="true" 
    scrollable="true" 
    scrollWidth="100%" 
    [(rows)]="this.gridOptions.rows" 
    [paginator]="true" 
    [lazy]="true" 
    [totalRecords]="nbTotal" 
    (onFilter)="filtrage($event)" 
    (onPage)="pagination($event)" 
    (onSort)="tri($event)" 
    [rowsPerPageOptions]="rowsPerPageOptions" > 
    /* There should be the p-columns */ 
</p-dataTable> 

Je veux que mes p colonnes être déclarées encore dans mon main.component.html comme:

<pagin-datatable [value]="partenaires" (pagin)="refresh($event)" [rowsPerPageOptions]="[5,10,20,40]"> 
     <p-column sortable="true" [filter]="true" field="aField"  header="A HEADER"></p-column> 
     /* And so it goes for every other p-columns */ 
</pagin-datatable> 

Ma question est la suivante: comment puis-je dire à mon composant pagin de laisser le p-datatable traiter le contenu envoyé dans les balises de composant?

Après la réponse ci-dessous:

trouvé cet article pour résoudre le problème primeng: github.com/primefaces/primeng/issues/1215.

Répondre

2

vous pouvez utiliser dans Pagin-datatable.component.html comme celui-ci

<p-dataTable [value]="value" 
    resizableColumns="true" 
    scrollable="true" 
    scrollWidth="100%" 
    [(rows)]="this.gridOptions.rows" 
    [paginator]="true" 
    [lazy]="true" 
    [totalRecords]="nbTotal" 
    (onFilter)="filtrage($event)" 
    (onPage)="pagination($event)" 
    (onSort)="tri($event)" 
    [rowsPerPageOptions]="rowsPerPageOptions" > 
    /* There should be the p-columns */ 
    <ng-content></ng-content> 
</p-dataTable> 

et dans votre main.component.html vous pouvez déformer votre colonne dans Pagin-datatable que vous voulez .

+1

Complètement oublié cette caractéristique majeure de Angular ... merci. Cependant, le cycle de vie empêche les colonnes p d'être récupérées par la table. Trouvé cet article (en tapant ng-contenu + primeng) pour résoudre le problème: https://github.com/primefaces/primeng/issues/1215. Fonctionne parfaitement ! – Callehabana