Je suis sur un projet où je dois utiliser un p-tabView. Un nouveau p-tabPanel doit être créé en cliquant sur un bouton dans le p-tabView.PrimeNG - Comment ajouter et supprimer dynamiquement un p-tabPanel dans le composant p-tabView
Comment ajouter dynamiquement de nouveaux panneaux à un p-tabView?
Je viens de trouver une solution possible à ce problème. Faire une liste du type d'objet de TabPanel.
tabs: TabPanel = [{header: 'tabbdfd', selected : false, disabled : false ,closable : true, closed : false}, {header: '3333', selected : false, disabled : false ,closable : true, closed : false}];
Le composant ressemble:
<p-tabView>
<p-tabPanel *ngFor="#tab of tabs" [header]="tab.header" >
<CONTENT>
</p-tabPanel>
</p-tabView>
Peut-être sera utile pour quelqu'un :)
Cela fonctionne certainement pour créer un ensemble dynamique d'onglets, mais le contenu n'est pas dynamique. Il n'est donc pas très utile d'avoir un tas d'onglets avec le même contenu. – Mutmansky
Lors de la sélection/modification de l'onglet, j'ai rechargé à partir d'une carte [key == tabHeader] le contenu du panneau sélectionné. De cette façon, en changeant les onglets, le contenu est également modifié. –
Compris, mais comment avez-vous peuplé cette carte? Je suppose que vous saviez toujours quel contenu vous deviez charger à l'avance afin que vous puissiez remplir cette carte de manière appropriée. Dans ma situation, le contenu des onglets est déterminé au moment de l'exécution. C'est-à-dire qu'il y a une table de base de données qui me dit quels onglets je dois avoir dans l'application. Donc, après le démarrage de mon application, j'ai lu cette liste d'onglets depuis la base de données et je les ai créés avec ComponentResolver. On dirait que votre situation est différente. – Mutmansky
Je me suis un moyen. J'utilise ngFor pour contrôler le # de tabPanel.
Mon code component.ts va manipuler myModel.leads. Ainsi, le nombre de tabPanel changera en conséquence.
<!--Lead-->
<p-tabView >
<p-tabPanel [selected]="i==0" *ngFor="let lead of procedureDetail.leads; let i = index" header="lead {{i+1}}" >
<div id="{{lead.id}}" class="my_dynamica_lead_tabPanel"> <!-- I can add content to this div with tabView.onChange() api -->
{{lead.id}} - {{i}}
</div>
<div class="row">
<div class="col-md-3">
Date:
</div>
<div class="col-md-9">
<p-calendar [style]="{'width':'180px'}" [monthNavigator]="true" [yearNavigator]="true" yearRange="1900:2020" name="lead.{{i}}.date" [(ngModel)]="lead.date" [showIcon]="true" ></p-calendar>
</div>
</div>
</p-tabPanel>
</p-tabView>
Remarque - Si vous oubliez d'inclure [sélectionné] attribut tout en utilisant * ngFor en p-TabPanel. Vous obtiendrez l'erreur suivante
TabPanel.html:2 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'none'. Current value: 'block'.
S'il vous plaît fournir que ce que vous avez essayé jusqu'à présent –
j'ai essayé de modifier le DOM ajouter quelque chose comme: à la tabWiev . Le DOM est modifié mais quelque chose ne va pas et le panneau n'est pas visible. –
J'ai également essayé de trouver une méthode du composant qui consiste à ajouter des panneaux au composant, mais sans succès. Le composant n'a aucune méthode pour ajouter de nouveaux panneaux. J'ai utilisé cette solution pour appeler des méthodes de composants: http://stackoverflow.com/questions/31013461/call-a-method-of-the-child-component –