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

Posted 2023-03-05

【中文标题】PrimeNG - 如何在 p-tabView 组件中动态添加和删除 p-tabPanel

【英文标题】：PrimeNG - How to dynamically add and remove a p-tabPanel in p-tabView component

【发布时间】：2017-01-16 03:43:40

【问题描述】：

我正在进行一个需要使用 p-tabView 的项目。单击 p-tabView 中的按钮时将创建一个新的 p-tabPanel。

如何将新面板动态添加到 p-tabView？

【问题讨论】：

请提供您迄今为止尝试过的内容

我尝试修改 DOM，添加如下内容： 到 tabWiev。 DOM 已修改，但出现问题，面板不可见。

我还试图找到一种组件方法，将面板添加到组件中，但没有成功。该组件没有添加新面板的方法。我使用这个解决方案来调用组件方法：***.com/questions/31013461/…

【参考方案1】：

我刚刚找到了解决此问题的可能方法。制作 TabPanel 的对象类型列表。

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

组件看起来像：

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

也许对某人有用:)

【讨论】：

这当然可以创建一组动态选项卡，但内容不是动态的。因此，拥有一堆内容相同的选项卡并不是很有用。

在选项卡选择/更改时，我从地图 [key == tabHeader] 重新加载了选定的面板内容。这样改变标签页，内容也随之改变。

了解，但您是如何填充该地图的？我假设您仍然知道需要提前加载哪些内容，以便您可以适当地填充该地图。在我的情况下，选项卡的内容是在运行时确定的。也就是说，有一个数据库表可以告诉我应用程序中需要哪些选项卡。因此，在我的应用程序启动后，我从数据库中读取了该选项卡列表，并使用 ComponentResolver 创建了它们。听起来你的情况有所不同。

我的情况也差不多。我的应用程序也连接到数据库。基本上，地图会在应用程序启动时填充。我正在调用一些 REST 服务来加载数据。我没有使用任何组件解析器。我有一个简单的 GUI，只有一个包含一些过滤器的数据表。

那么您的答案可能缺少某些内容。您放入 就好像它是一个占位符，所以我假设内容只是在模板中静态定义的。我可以看到 中的数据如何根据地图中的内容而有所不同，但 本身是相同的。正确的？如果不是，如何根据地图中的内容将内容加载到 DOM 中？

【参考方案2】：

我想出了一个办法。我正在使用 ngFor 来控制 tabPanel 的#。

我的 component.ts 代码将操纵 myModel.leads。因此，tabPanel 的数量会相应改变。

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

注意 - 如果您在 p-tabPanel 中使用 *ngFor 时忘记包含 [selected] 属性。您将收到以下错误

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

【讨论】：

我在做同样的事情，有一件事：当我从绑定到 ngFor 的数组中删除元素时（例如 procedureDetail.leads），我遇到了内存泄漏，节点没有从DOM...

【参考方案3】：

你可以这样做：

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