当我滚动到 Angular Syncfusion Scheduler 的底部时,它显示为空白

问题描述

我正在使用 Angular Syncfusion Scheduler 来显示游戏列表。 我目前展示了大约 700 款游戏,并已配置为使用虚拟滚动。

这是我的配置的样子:

<div>
            <ng-template #cellHeaderTemplate let-data>
              <div class="date-text">header</div>
            </ng-template>
            <ejs-schedule #scheduleObj
              width="100%"
              [height]="schedulerHeight"
              cssClass='virtual-scrolling'
              allowDragAndDrop="true"
              startHour = "07:00"
              [selectedDate]="selectedDate"
              [group]="group"
              [timeScale]="timeScale"
              [eventSettings]="eventSettings"
              (eventRendered)="onEventRendered($event)"
              (navigating)="onnavigating($event)"
              (actionBegin)="onActionBegin($event)"
              (actionComplete)="onActionComplete($event)"
              (popupOpen)="onPopupOpen($event)"
              (dragStart)='onDragStart($event)'
              (dragStop)='onDragStop($event)'
              >
              <e-resources>
                <e-resource field="ComplexId" title="All Complexes" [dataSource]="complexDataSource"
                  [allowMultiple]="allowMultiple" name="Complexes" textField="complexName" idField="complexId">
                </e-resource>
                <e-resource field="VenueId" title="Complex Field" [dataSource]="categoryDataSource"
                  [allowMultiple]="allowMultiple" name="Fields" textField="fieldName" idField="fieldId" groupIDField="complexId"
                  colorField='#FF0000'
                  startHourField='startHour'
                  endHourField='endHour'
                 >
                </e-resource>
              </e-resources>
              <e-views>
                <e-view option="TimelineDay" allowvirtualscrolling="true"></e-view>
                <!-- <e-view option="TimelineDay"></e-view> -->
              </e-views>
            </ejs-schedule>
            <ejs-contextmenu #menuObj cssClass='schedule-context-menu' target='.e-schedule'
            [items]='menuItems'
            (beforeOpen)='onContextMenuBeforeOpen($event)'
    (select)='onMenuItemSelect($event)'></ejs-contextmenu>
            <!-- </div> -->
          </div>

与不使用虚拟滚动功能加载所有数据相比,它工作正常并且性能更高。 但是,当我滚动到调度程序的底部时,我可以看到允许我滚动的次数超过调度程序本身的数量,这给我留下了空白。

enter image description here

解决方法

我们根据您共享的代码片段准备了一个示例,并且虚拟滚动功能在我们这边正常工作,可以从以下链接查看。

示例https://stackblitz.com/edit/ej2-angular-schedule-virtual-scrolling-sample-4pny8v?file=app.component.ts

请尝试上述解决方案,如果需要任何进一步的帮助,请回复我们。

问候,
哈雷什