TabView 中的 PrimeNG VirtualScroller 无法正常工作

Answer 1

我刚刚找到了解决该问题的方法。关键是在选择选项卡时使用 ngIf 加载虚拟滚动。 对于您的示例，这意味着：

<p-tabView (onChange)="changeTab($event)" class="main-tab-view" [style]="{'heigth':'100%'}">
<p-tabPanel header="TestVS">
    <app-virtual-scroller *ngIf="scrollTabSelected"></app-virtual-scroller>
</p-tabPanel>

在组件中：

changeTab(ev) {
  this.scrollTabSelected = ev.index === 1;
}

将索引更改为包含虚拟滚动的选项卡的索引。如果虚拟滚动位于第一个选项卡中，我还没有测试解决方案。

Answer 2

不是必须使用

changeTab(ev) {
  this.scrollTabSelected = ev.index === 1;
}

如果使用 ng-template pTemplate="content" 解决这个麻烦

<p-tabPanel>
    <ng-template pTemplate="content">
        <your-component>
     </ng-template>
</p-tabPanel

Answer 3

我对 p-tabMenu 也有类似的问题，包括使用虚拟滚动的 p-table。对我来说，解决方法是在 p-tabMenu 组件上使用 ngIf 在选项卡模型存在时渲染该组件。