6

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

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

4

3 回答 3

7

我想出了一个办法。我正在使用 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'.
于 2017-05-23T17:34:49.683 回答
0

我刚刚找到了解决这个问题的可能方法。制作 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>

也许对某人有用:)

于 2016-09-08T13:15:56.537 回答
-1

你可以这样做：

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

于 2020-12-01T13:01:24.000 回答