作者热门文章
- c - 在位数组中找到第一个零
- linux - Unix 显示有关匹配两种模式之一的文件的信息
- 正则表达式替换多个文件
- linux - 隐藏来自 xtrace 的命令
我在一个需要使用 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'.
关于jquery - PrimeNG - 如何在 p-tabView 组件中动态添加和删除 p-tabPanel,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39387022/
我是一名优秀的程序员,十分优秀!