离子5离子虚拟滚动无法正确渲染

Question

我正在使用Ionic 5 +电容器。 面对虚拟滚动无法正确呈现的随机现象，它发生在页面刷新之后。 如果我对列表应用了任何视图更改，例如使用新关键字更改细分/搜索，它可能会恢复正常。 刷新页面也可以解决问题。

场景1 页面刷新后，整个虚拟滚动列表消失了。

场景2 页面刷新后，虚拟滚动列表将垂直显示前半部分。

环境：

Ionic:

   Ionic CLI                     : 6.11.1 (/Users/nelsonmui/.nvm/versions/node/v12.16.1/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.2.2
   @angular-devkit/build-angular : 0.901.9
   @angular-devkit/schematics    : 9.1.9
   @angular/cli                  : 9.1.9
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.2.0
   @capacitor/core : 2.4.0

Utility:

   cordova-res : 0.15.1
   native-run  : 1.0.0

System:

   NodeJS : v12.16.1 (/Users/nelsonmui/.nvm/versions/node/v12.16.1/bin/node)
   npm    : 6.14.7
   OS     : macOS Catalina

下面是我的编码：

<ion-list lines="none" class="ion-no-padding" *ngIf="eventList && eventList.length">
    <ion-virtual-scroll [items]="eventList" approxItemHeight="166px">
      <div *virtualItem="let event; let i = index;">
          <ion-item-sliding *ngIf="event && event.eventId" #slidingItem>
            <ion-item class="ion-item-no-padding" (click)="loginEvent(event.eventId)" lines="none">
              <ion-grid class="full-width">
                <ion-row class="ion-no-padding" class="ion-align-items-center">
                  <ion-col class="ion-text-center ion-align-items-center ion-no-margin" size-xs="4" size-sm="3" size-md="2" >
                    <ion-card class="ion-text-center countdown-card">
                      <ion-text color="dark" *ngIf="event.countDown > 0">
                        <div><ion-text class="font-bold font-16">{{ event.countDown }}</ion-text></div>
                        <div><ion-text class="font-10 ion-text-uppercase">{{ 'EVENT_LIST.msg.days' | translate }}</ion-text></div>
                      </ion-text>
                      <ion-text color="dark" class="font-semi font-12 ion-text-uppercase" *ngIf="event.countDown < 0">
                        {{ 'EVENT_LIST.msg.expired' | translate }}
                      </ion-text>
                      <ion-text color="dark" class="font-semi font-12 ion-text-uppercase" *ngIf="event.countDown == 0">
                        {{ 'EVENT_LIST.msg.today' | translate }}
                      </ion-text>
                    </ion-card>
                  </ion-col>
                  <ion-col size-xs="8" size-sm="9" size-md="10">
                    <div class="ion-margin-vertical line-120">
                      <ion-label class="font-15 font-bold line-200" *ngIf="event.title">
                        {{ event.title }}
                      </ion-label>
                      <ion-label class="font-12" *ngIf="event.time && event.time.seconds && event.timezone && event.timezone.utc">
                        <ion-icon class="icon-small" src="./assets/img/icon/calendar.svg"></ion-icon>
                        {{ event.time.seconds * 1000 | date : 'dd MMM yyyy, EEEE' : 'UTC' + event.timezone.utc }}
                      </ion-label>
                      <ion-label class="font-12" *ngIf="event.time && event.time.seconds && event.timezone && event.timezone.utc">
                        <ion-icon class="icon-small" src="./assets/img/icon/clock.svg"></ion-icon>
                        {{ event.time.seconds * 1000 | date : 'h:mm a' : 'UTC' + event.timezone.utc }} &nbsp;<span class="font-10">(UTC{{ event.timezone.utc }})</span>
                      </ion-label>
                      <ion-label class="font-12" *ngIf="event.role && event.role.type">
                        <ion-icon class="icon-small" src="./assets/img/icon/profile.svg"></ion-icon>&nbsp;
                        <ng-container *ngIf="event.role.custom">{{ event.role.type }}</ng-container>
                        <ng-container *ngIf="!event.role.custom">{{ 'GENERAL.list.role.' + event.role.type | translate }}</ng-container>
                        <ng-container *ngIf="event.owner">&nbsp;({{ 'GENERAL.list.role.owner' | translate }})</ng-container>
                      </ion-label>
                      <ion-label class="font-12">
                        <div>
                          <ng-container *ngIf="event.package.type === 'trial'">
                            <ion-icon class="icon-small" src="./assets/img/icon/star.svg"></ion-icon>
                            <span class="font-semi">{{ 'GENERAL.label.trial' | translate }}</span>
                            <ng-container *ngIf="event.trial_countDown">
                              <ng-container *ngIf="event.trial_countDown > 1"> ( Expire in {{ event.trial_countDown}} days )</ng-container>
                              <ng-container *ngIf="event.trial_countDown == 1"> ( Expire in {{ event.trial_countDown}} day )</ng-container>
                              <ng-container *ngIf="event.trial_countDown == 0"> ( Expire by today )</ng-container>
                              <ng-container *ngIf="event.trial_countDown < 0"> ( Expired )</ng-container>
                            </ng-container>
                          </ng-container>
                          <ng-container *ngIf="event.package.type !== 'trial'">
                            <ion-icon class="icon-small" src="./assets/img/icon/crown.svg"></ion-icon>
                            <span class="font-semi">{{ 'GENERAL.label.premium' | translate }}</span>
                          </ng-container>
                        </div>
                      </ion-label>
                    </div>
                  </ion-col>
                </ion-row>
              </ion-grid>
            </ion-item>
            <ion-item-options side="end" (ionSwipe)="checkActionSwipe(event)">
              <ion-item-option color="danger" (click)="deleteEvent(event)" *ngIf="!event.owner && !event.role.hostId"><ion-icon name="trash-outline"></ion-icon></ion-item-option>
            </ion-item-options>
          </ion-item-sliding>
        </div>
      </ion-virtual-scroll>