在PrimeNg中动态添加tabPanel到tabView

import { TabViewModule } from 'primeng/tabview';
import { TabPanelModule } from 'primeng/tabpanel';

tabPanels: any[] = [];

<p-tabView>
  <ng-template pTemplate="header">
    <ul>
      <li *ngFor="let panel of tabPanels; let i = index" [class]="panel.active ? 'active' : ''">
        <a (click)="activateTabPanel(i)">{{panel.title}}</a>
        <span *ngIf="panel.closable" (click)="closeTabPanel(i)">×</span>
      </li>
    </ul>
  </ng-template>

  <ng-template pTemplate="content">
    <div *ngFor="let panel of tabPanels; let i = index" [class]="panel.active ? 'active' : ''">
      <p-tabPanel [header]="panel.title" [closable]="panel.closable" [selected]="panel.active">
        <!-- tabPanel内容 -->
      </p-tabPanel>
    </div>
  </ng-template>
</p-tabView>

addTabPanel() {
  const newPanel = {
    title: 'New Panel',
    closable: true,
    active: true
  };
  this.tabPanels.push(newPanel);
}

activateTabPanel(index: number) {
  this.tabPanels.forEach(panel => panel.active = false);
  this.tabPanels[index].active = true;
}

closeTabPanel(index: number) {
  this.tabPanels.splice(index, 1);
}

<button (click)="addTabPanel()">Add Tab Panel</button>