Virtual scroll no longer working correctly after upgrading to 4.6.*

@Slavrix wrote:

My Virtual Scroll has been broken somehow between versions 4.5.0 and 4.6.*

Any assistance in helping me track down the issue so I can report it correctly on the github would be useful.

 <ion-virtual-scroll [items]="filteredEvents" approxItemHeight="200px" [headerFn]="eventDaySplit" approxHeaderHeight="35px">

    <ion-item-divider *virtualHeader="let header">

      <ion-label>{{header | amDateFormat:'dddd DD MMMM'}}</ion-label>
    </ion-item-divider>
    <ion-card *virtualItem="let event; let itemBounds = bounds;">

      <ion-item [ngClass]="rightBorderClass(event.attending)" (click)="gotoViewEvent(event, event.attending)">
          <ion-label text-wrap>

          <ion-text color="primary" *ngIf="event.name">
            <h2>
              <span *ngIf="event?.group_details?.length==1">{{event.group_details[0].shortName}} | </span>
              <span *ngIf="event?.group_details?.length>1">{{event.group_details.length}} Groups | </span>
              {{event.name}}
            </h2>
          </ion-text>
          <ion-text color="primary" *ngIf="!event.name"><h2>No Event Name</h2></ion-text>
          <ion-text color="primary" *ngIf="event.type"><h2> {{event.type}} <span *ngIf="event.type=='Game' || event.type=='Final'">vs {{event.opponent}}</span></h2></ion-text>

          <p>
            {{event.startDatetime | amDateFormat:'HH:mm' }}<span *ngIf="event.endDatetime"> to {{event.endDatetime | amDateFormat:'HH:mm' }}</span>
          </p>

          <ion-text color="danger" *ngIf="event.cancelled"><h2><i>CANCELLED</i></h2></ion-text>
          <p id="location-text" *ngIf="event.location">{{event.location}}</p>
          <p id="location-text" *ngIf="event.address.readable">{{event.address?.readable}}</p>

        <p class="italic">
          {{event.private?'Private':'Public'}}
        </p>

        <p *ngIf="event.childInvited.length==1">Child Invited: {{event.childInvited.length}}</p>
        <p *ngIf="event.childInvited.length>1">Children Invited: {{event.childInvited.length}}</p>
          </ion-label>
          <ion-icon color="dark" name="lock" slot="end" *ngIf="event.cancelled || isInPast(event.startDatetime)"></ion-icon>
      </ion-item>

    </ion-card>

  </ion-virtual-scroll>

I’m filling in the filteredEvents object inside an observable server call.

EventService.call('event.getEvents', this.selectedOrganisation._id, this.activities.theDate.format(), this.profile.isAdmin).subscribe((events: any) => {
        this.events = this.dateSortPipe.transform(events);
        this.filteredEvents = this.applyFiltersToEvents(this.events);
        this.virtualScroll.checkEnd();
          // if (this.filteredEvents.length > 0) {
          //   setTimeout(() => {
          //     this.virtualScroll.checkRange(0, 5);
          //   }, 250);
          // }
        // this.refs.markForCheck();
        // if (this.filteredEvents.length > 0) {
        //   setTimeout(() => {
        //     this.virtualScroll.checkRange(0, 5);
            // this.virtualScroll.checkEnd();
            // this.refs.detectChanges();
            this.presenters.dismissLoader();
        //   }, 250);
        // }
        console.log('event sub list admin', this.events);
      });

@ionic/angular:4.5.0

Screen Shot 2019-07-13 at 8.17.17 pm.png466×705 42.7 KB

@ionic/angular:4.6.0
@ionic/angular:4.6.1
@ionic/angular:4.6.2

Screen Shot 2019-07-13 at 8.19.52 pm.png469×694 32.1 KB

Posts: 1

Participants: 1

Read full topic