TabView 中的 PrimeNG VirtualScroller 无法正常工作

Question

我的 Angular 7 应用程序中有一个 VirtualScroller，遗憾的是它在启动时没有呈现所有项目。

这是它的代码：

<p-virtualScroller [value]="financialItems" scrollHeight="400px" [itemSize]="150">
    <p-header>
        <div class="ui-g">
            <div class="ui-g-12 title-container">
                Title
            </div>
        </div>
    </p-header>
    <ng-template let-psp pTemplate="item">
        <div class="ui-g psp-item">
            <div class="ui-g-12 ui-md-1">
                <div style="font-size: 16px; text-align: left; margin-top: 15px;">Number:</div>
                <div style="font-size: 16px; text-align: left; margin-top: 15px;">Number:</div>
                <div style="font-size: 16px; text-align: left; margin-top: 15px;">Hint:</div>
            </div>
            <div class="ui-g-12 ui-md-3">
                <div style="font-size: 16px; text-align: left; font-weight: bold; margin-top: 15px;">{{ psp.orderNumber }}</div>
                <div style="font-size: 16px; text-align: left; margin-top: 15px; font-weight: bold;">{{ psp.pspNumber }}</div>
                <div style="font-size: 16px; text-align: left; margin-top: 15px; font-weight: bold;">{{ psp.hint }}</div>
            </div>
            <div class="ui-g-12 ui-md-3">
                <div class="ui-g">
                    <div class="ui-g-3 ui-sm-6">Dauer: </div>
                    <div class="ui-g-8 ui-sm-6">{{psp?.startDate.toLocaleString('de-DE', { year: 'numeric', month: 'numeric', day: 'numeric' })}} - {{psp?.endDate.toLocaleString('de-DE', { year: 'numeric', month: 'numeric', day: 'numeric' })}}</div>

                    <div class="ui-g-3 ui-sm-6">TCV: </div>
                    <div class="ui-g-8 ui-sm-6">{{psp?.planRevenue | number:'1.2-2':'de'}}</div>

                    <div class="ui-g-3 ui-sm-6">Kosten: </div>
                    <div class="ui-g-8 ui-sm-6">{{psp?.planCosts | number:'1.2-2':'de'}}</div>

                    <div class="ui-g-3 ui-sm-6">Stunden: </div>
                    <div class="ui-g-8 ui-sm-6">{{psp?.totalHours | number:'1.2-2':'de'}}</div>
                </div>
            </div>
            <div class="ui-g-12 ui-md-3">
                <div class="ui-g">
                    <div class="ui-g-6 ui-sm-6">Eigenumsatz: </div>
                    <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.planOwnRevenue | number:'1.2-2':'de'}}</div>

                    <div class="ui-g-6 ui-sm-6">Nichteigener Umsatz: </div>
                    <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.planOtherRevenue | number:'1.2-2':'de'}}</div>

                    <div class="ui-g-6 ui-sm-6">DB1-Kosten: </div>
                    <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.costDB1 | number:'1.2-2':'de'}}</div>

                    <div class="ui-g-6 ui-sm-6">DB2-Kosten: </div>
                    <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.costDB2 | number:'1.2-2':'de'}}</div>
                </div>
            </div>
            <div class="ui-g-12 ui-md-2">
                <div class="ui-g center-div">

                    <div class="ui-g-6 ui-sm-6">Gewährleistung: </div>
                    <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.planWarranty | number:'1.2-2':'de'}}</div>

                    <div class="ui-g-6 ui-sm-6">Risiko: </div>
                    <div class="ui-g-6 ui-sm-6 bold-font">{{psp?.planRisk | number:'1.2-2':'de'}}</div>
                </div>
            </div>
        </div>
    </ng-template>
</p-virtualScroller>

在 tabView 内部调用：

<p-tabView class="main-tab-view" [style]="{'heigth':'100%'}">
    <p-tabPanel header="TestVS">
        <app-virtual-scroller></app-virtual-scroller>
    </p-tabPanel>
</p-tabView>

我的组件：

private financialItems: FinancialItem[] = [];

ngOnInit() {
    this.initTestData();
}

  initTestData() {
    this.financialItems.push(new FinancialItem("Nr.1", new Date("2018-12-01"), new Date("2018-12-31"), 10.00, "Ein Hinweis",
    'Test', "12345678", 180, 13500, 10, 170, 5940, 1000, 6940, 0.0, 0.0, 0.0, 13500));
    this.financialItems.push(new FinancialItem("Nr.2", new Date("2018-12-01"), new Date("2018-12-31"), 10.00, "Ein Hinweis",
    'Test', "12345678", 180, 13500, 10, 170, 5940, 1000, 6940, 0.0, 0.0, 0.0, 13500));
    this.financialItems.push(new FinancialItem("Nr.3", new Date("2018-12-01"), new Date("2018-12-31"), 10.00, "Ein Hinweis",
    'Test', "12345678", 180, 13500, 10, 170, 5940, 1000, 6940, 0.0, 0.0, 0.0, 13500));
  }

现在在执行代码并打开选项卡时，我看到了VirtualScroller - 但不是所有元素都立即可见。然而，元素足够长，因此所有元素都应该存在。

这是视图：

最后一个元素是不可见的，但它是存在并呈现的。当我使用ng serve 时，我可以看到那个元素。

现在滚动显示不可见的项目，但底部（现在不可见的部分）保持不可见。当我删除项目周围的p-tabView 时，它完全可见。我怎样才能解决这个问题？我想将其保留在选项卡视图中。

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;
}

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