PrimeNG - 如何在 p-tabView 组件中动态添加和删除 p-tabPanel

Question

I'm on a project where I need to use a p-tabView. A new p-tabPanel is to be created when clicking on a button in the p-tabView.

How can I dynamically add new panels to a p-tabView?

Answer 1

I figured out a way. I am using ngFor to control the # of tabPanel.

My component.ts code will manipulate myModel.leads. Thus, the number of tabPanel will change accordingly.

<!--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> 

Note - If you forget to include [selected] attribute while using *ngFor in p-tabPanel. You will get following error

TabPanel.html:2 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'none'. Current value: 'block'.

Answer 2

I just found a possible sollution for this problem. Making a list of object type of TabPanel.

tabs: TabPanel = [{header: 'tabbdfd', selected : false, disabled : false ,closable : true, closed : false}, {header: '3333', selected : false, disabled : false ,closable : true, closed : false}];

The component looks like:

<p-tabView>  
     <p-tabPanel *ngFor="#tab of tabs" [header]="tab.header" >
            <CONTENT>   
    </p-tabPanel>
</p-tabView> 

Maybe will be usefull for somebody :)

Answer 3

你可以像下面这样做：

<ng-template pTemplate="header"> Header Text </ng-template>