[英]How link to and target/open a p:tab within an p:accordionPanel within a p:tab within a p:tabview
[英]PrimeNG - How to dynamically add and remove a p-tabPanel in p-tabView component
我在一個需要使用 p-tabView 的項目中。 單擊 p-tabView 中的按鈕時,將創建一個新的 p-tabPanel。
如何將新面板動態添加到 p-tabView?
我想了個辦法。 我正在使用 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'.
我剛剛為這個問題找到了一個可能的解決方案。 制作 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>
也許對某人有用:)
你可以像下面這樣做:
<ng-template pTemplate="header"> Header Text </ng-template>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.