CODEWITHSUNDEEP
typescriptionic-frameworkionic4angular8
Muhammad Abdullah
Muhammad Abdullah

Reputation: 482

Ionic 5 Virtual scroll creates blank space instead of new item

this is the output problem image

I am trying to render the list using ion-virtual-scroll but when I update the list dynamically it doesn't show the new item and create blank space but when I inspect the scroll that item is present in the list with this CSS property " transform: translate3d(0px, -9999px, 0px); " 

   <ion-col size="12" size-sm="8" offset-sm="2" class="ion-text-center">
    <ion-virtual-scroll [items]="listedLoadedPlaces"

    >
      <ion-item

        [routerLink]="place.id"
        detail
        *virtualItem="let place"
      >
        <ion-thumbnail slot="start">
          <ion-img [src]="place.imageUrl"></ion-img>
        </ion-thumbnail>
        <ion-label>
          <h2>{{place.title}}</h2>
          <p>{{place.description}}</p>
        </ion-label>
      </ion-item>
    </ion-virtual-scroll>
  </ion-col>

Upvotes: 2

Views: 1305

Answers (1)

brooklynDadCore
brooklynDadCore

Reputation: 1589

Anyone encountering this or a similar issue may want to try running checkRange or checkEnd these apis provided by the IonVirtualScroll mark either the last item or a specified item as dirty to trigger a fresh render of that item.

IN an ionic angular project it will look something like this.

template: <ion-virtual-scroll #listedLoadedPlacesScroll [items]="listedLoadedPlaces">
           <ion-item........

component:
  @ViewChild('#listedLoadedPlacesScroll', null) listedLoadedPlacesScroll: IonVirtualScroll;

.....
functionToUpdateList(): void {
   this.listedLoadedPlaces.push(newItem);
   this.listedLoadedPlacesScroll.checkEnd();
}

If you just needed to update a specific item that wasnt the last one in the source data array, you will use checkRange

template: <ion-item
        [routerLink]="place.id"
        detail
        *virtualItem="let place; let index = index;"
        (click)="doSomething(place, index)"
      >

component:
    doSomething(place, index): void {
      ..do something to place...
      this.listedLoadedPlacesScroll.checkRange(index, 1);
}

In checkRange you instruct the IonVirtualScroll element to mark the item at the index as dirty, the second param is len for length, it is how many items including the current item to mark as dirty. SO len = 3 means index, index + 1, index + 2 items at those positions will be marked dirty and subjected to a fresh render.

I had one issue where changing an item in view required a change to an item out of view the solution was to mark all the items as dirty checkRange(0, items.length), in elegant perhaps but it works as desired now.

Upvotes: 2

Related Questions