如何解决PrimeNg TabView不适用于可观测对象
我正在尝试通过从服务器获取数据来填充PrimeNG TabView选项卡。但是,它们似乎不能与Observables配合使用。我在这里发布了一个示例:
https://stackblitz.com/edit/primeng-nx7ryc?file=app%2Fapp.component.ts
- 我的Angular组件中没有任何初始项,因此动态选项卡根本不会显示
- 只有一个初始项时,动态标签面板仅在单击INITIAL标签面板时显示
您能建议解决方法吗?
解决方法
要处理无初始项目的情况,您可以在*ngIf="this.items?.length"
元素上放置一个<p-tabView>
。
要同时处理无首选项和单首选项情况,可以使用activeIndex
的{{1}}属性:
<p-tabView>
在数据到达后设置该值将触发<p-tabView [activeIndex]="activeIndex"> <----- add [activeIndex] here
<p-tabPanel *ngFor="let item of items; let i = index" [header]="item.username" [selected]="i == 0">
[{{item.username}}]
</p-tabPanel>
</p-tabView>
刷新自身。
因此您的组件将如下所示:
<p-tabView>
Here's a fork of your StackBlitz演示了这种方法。
,我报告了与PrimeNG团队非常相似的问题,PrimeNG已使用10.0.1版修复了该问题。尝试安装primeng@10.0.1。
https://github.com/primefaces/primeng/issues/9331
,我有一个与 TabPanel 类似的案例。 在 PrimeNG 11 中,它不响应对“isValidPaymentTerms”属性的更改。 它只会在您选择页面后执行。
<p-tabPanel header="Exceptional Payment Terms"
[selected]="Constants.C_PAYMENT == vTabSelected"
*[rightIcon]="isValidPaymentTerms ? '': 'fas fa-exclamation-triangle'"*>
...
</p-tabPanel>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。