angular - Angular 2 kendo 网格虚拟滚动分页在拖放滚动条时无法正常工作

Question

我正在做一个带有剑道网格的虚拟滚动演示。我正在使用远程数据（来自服务的 API 调用）。当我将滚动条拖放到网格底部时，应该显示最后一页数据（这里 pagesize = 50 所以最后 50 个数据）。但这并没有发生。我的数据库中共有 337154 个数据。

gridtest.component.html：

<kendo-grid [data]="gridData" [skip]="currentSkip" [pageSize]="pageSize"  [scrollable]="'virtual'" [rowHeight]="35"       (pageChange)="pageChange($event)" [height]="500">
    <kendo-grid-column field="RowNumber" title="Row Number" width="80">
    </kendo-grid-column>
    <!-- class="hidden" [headerClass]="'k-hidden'"-->
    <kendo-grid-column field="MaterialNum" title="PartNumber" width="90">
    </kendo-grid-column>
    <kendo-grid-column field="Description" title="Description" width="250">
    </kendo-grid-column>
    <kendo-grid-column field="Commodity" title="Commodity">
    </kendo-grid-column>
    <kendo-grid-column field="MaterialUOM" title="UOM" width="80">
    </kendo-grid-column>
    <kendo-grid-column field="QACheck" title="QACheck" width="80">
    </kendo-grid-column>
    <kendo-grid-column field="PreferredVendor" title="PreferredVendor" width="80">
    </kendo-grid-column>
    <kendo-grid-column field="Mark" title="Mark" width="80">
    </kendo-grid-column>

</kendo-grid>
<div class="componentLoader" [ngClass]="IsBusy?'show':'hide'">
    <img class="componentloader" src="images/loading.gif" />
</div>

gridtest.component.ts：

import { FrameworkService } from "../../services/FrameworkService";
import { Component, ElementRef, ViewEncapsulation, Input, NgZone, HostListener } from '@angular/core';
import { Shared, SharedModel } from "../../common/Shared/Shared";
import { PageDataOutputModel } from '../../models/PageDataOutputModel'
import {
    GridDataResult,
    PageChangeEvent
} from '@progress/kendo-angular-grid';
import 'rxjs/add/operator/map';
import { ApplicationService } from "../../services/ApplicationService";
import { Subject } from 'rxjs/Subject'
import 'rxjs/add/operator/takeUntil';
import 'rxjs/add/operator/debounceTime';
@Component({
    selector: 'gridTest',
    templateUrl: './gridTest.component.html',
})

export class GridTestComponent extends ApplicationService {
    public currentScrollTop: number = 0;
    @Input() contentHeight: number = 0;
    public extraHeight: number = 10;
    @Input() contentWidth: number = 0;
    public OrderedData: any;
    public sharedData: SharedModel;
    public contextData: any;
    public gridData: GridDataResult;
    public data: any;
    public currentPageNo: any;
    public totalRowCount : any = 0;
    public pageSize = 50;
    public IsBusy: boolean = false;
    @Input() pageDataOutputDetail: PageDataOutputModel = new PageDataOutputModel();
    public currentSkip = 0;
    public previousSkip : any;
    items: any;
    constructor(public sharedResource: Shared, private frameworkService: FrameworkService, private el: ElementRef, private zone: NgZone) {

        super();

        if (this.ApplicationManager != null) {
            this.sharedData = this.ApplicationManager.Framework.sharedResource.SharedComponent;
        }
        else {
            this.sharedData = sharedResource.SharedComponent;
        }
        this.getItemList();
    }

    ngUnsubscribe: Subject<boolean> = new Subject<boolean>();

    ngAfterViewInit() {
    }

    loadItems() {

        this.gridData = {
            data: this.data,
            total: 337154
        }

        console.log(this.data.length);
        this.IsBusy = false;
    }

    getItemList() {
        this.IsBusy = true;
        if (this.currentSkip == 0) {
            this.data = [];
            this.pageSize = 100;
            this.contextData = {
                'PageNum': 1,
                'ScrollDirection': 0
            }

        }
        else {
            this.pageSize = 50;
        }

        this.ItemDataSource();

    }

    public ItemDataSource() {
        // this.data = [];
        this.IsBusy = true;
        this.frameworkService.MaterialList(this.contextData).takeUntil(this.ngUnsubscribe).subscribe((data: any) => {
            this.items = data;
            for (let i = 0; i < this.items.MaterialList.length; i++) {
                let passData: any = {};
                passData.PartNumber = this.items.MaterialList[i].PartNumber;
                passData.MaterialNum = this.items.MaterialList[i].MaterialNum;
                passData.Description = this.items.MaterialList[i].MaterialDescription;
                passData.Commodity = this.items.MaterialList[i].Commodity;
                passData.UOM = this.items.MaterialList[i].UOM;
                passData.QACheck = this.items.MaterialList[i].QACheck;
                passData.PreferredVendor = this.items.MaterialList[i].PreferredVendor;
                passData.Mark = this.items.MaterialList[i].Mark;
                passData.RowNumber = this.items.MaterialList[i].RowNumber;
                this.data.push(passData);
            }
            this.previousSkip = this.currentSkip;
            this.loadItems();
        }, (err) => {
            console.log(err);
            });

    }

    public pageChange(event: PageChangeEvent): void {

        //this.IsBusy = true;
        this.currentSkip = event.skip;

        if (this.currentSkip > this.previousSkip || this.currentSkip == 0) {
            this.contextData.PageNum = this.pageDataOutputDetail.PageNum;
            this.currentPageNo = this.pageDataOutputDetail.PageNum;
            this.contextData.ScrollDirection = 1;
            this.totalRowCount = (this.pageDataOutputDetail != null && this.pageDataOutputDetail.RecordCount != null) ? this.pageDataOutputDetail.RecordCount : this.OrderedData.length;
        }
        else if (this.currentSkip < this.previousSkip && this.contextData.PageNum > 0) {
            this.contextData.PageNum = this.pageDataOutputDetail.PageNum;
            this.contextData.ScrollDirection = -1;
            this.currentPageNo = this.pageDataOutputDetail.PageNum;
            //this.totalRowCount = (this.pageDataOutputDetail != null && this.pageDataOutputDetail.RecordCount != null) ? this.pageDataOutputDetail.RecordCount : this.OrderedData.length;
        }

        console.log(this.contextData);
        this.pageSize = 50;
        if (!this.IsBusy) {
        this.ItemDataSource();
        this.data = this.data.slice(this.contextData.PageNum < 3 ? 0 : (this.contextData.PageNum - 2) * this.pageSize, (this.contextData.PageNum * this.pageSize));
        }

        //end

    }

}

现在根据此链接（使用 jQuery 的剑道网格虚拟滚动远程数据）pagechange 事件将自动提供页码或位置，无论您是在底部还是顶部。所以我无法理解这段代码有什么问题。

提前致谢。