时间戳

首页 > 解决方案 > 为什么 PrimeNG VirtualScroller loadingItem 不起作用？

angular - 为什么 PrimeNG VirtualScroller loadingItem 不起作用？

问题描述

我有 PrimeNG 11.0.0-rc.2 与 Angular 11 一起使用。我正在使用 VirtualScroller 组件，但我意识到应该显示加载器语句的 loadingItem ng-template 不起作用，即使在他们的示例中，他们也有这个：

<p-virtualScroller [value]="virtualCars" scrollHeight="500px" [itemSize]="150" [rows]="100"
    [lazy]="true" (onLazyLoad)="loadCarsLazy($event)">
    <ng-template let-car pTemplate="item">
        Car content
    </ng-template>
    <ng-template let-car pTemplate="loadingItem">
        Loading...
    </ng-template>
</p-virtualScroller>

在组件类中，他们有这个：

export class LazyVirtualScrollerDemo implements OnInit {

    virtualCars: Car[];
   
    ngOnInit() {
        this.cars = Array.from({length: 10000}).map(() => this.carService.generateCar());
        this.virtualCars =  Array.from({length: 10000});
    }

    loadCarsLazy(event: LazyLoadEvent) {       
        //simulate remote connection with a timeout 
        setTimeout(() => {
            //load data of required page
            let loadedCars = this.cars.slice(event.first, (event.first + event.rows));

            //populate page of virtual cars
            Array.prototype.splice.apply(this.virtualCars, [...[event.first, event.rows], ...loadedCars]);
            
            //trigger change detection
            this.virtualCars = [...this.virtualCars];
        }, 1000);
    }

}

但是 ng-template 中的 Loading... 语句没有显示出来。只是一个空白部分，好像那里什么都没有，然后数据正常到达，但加载时的鬼影效果从未出现。

标签： angularlazy-loadingprimeng

解决方案

我通过使length变量 in this.virtualCars = Array.from({length: 10000});等于[rows] HTML 输入变量的值来使加载模板正常工作p-virtual-scroller。

所以例如

    ngOnInit() {
        this.virtualCars =  Array.from({length: 50});
    }

and

<p-virtual-scroller rows = "50"></p-virtual-scroller>

推荐阅读