typescript - Ionic 5 Virtuell scroll skapar tomt utrymme istället för nytt objekt

Jag försöker rendera listan med ion-virtual-scroll men när jag uppdaterar listan dynamiskt visas inte det nya objektet och det skapas ett tomt utrymme, men när jag inspekterar scrollen är det objektet närvarande i listan med denna CSS-egenskap " 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>

Svar #1

Vem som helst som stöter på detta eller ett liknande problem kan vilja prova att köra checkRange eller checkEnd, dessa API:er som tillhandahålls av IonVirtualScroll markerar antingen det sista objektet eller ett specificerat objekt som smutsigt för att trigga en ny rendering av det objektet.

I ett Ionic Angular-projekt kommer det att se ut ungefär så här.

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

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

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

Om du bara behövde uppdatera ett specifikt objekt som inte var det sista i källdataarrayen, kommer du att använda 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);
}

I checkRange instruerar du IonVirtualScroll-elementet att markera objektet på indexet som smutsigt, den andra parametern är len för length, det är hur många objekt inklusive det aktuella objektet som ska markeras som smutsiga. Så len=3 betyder att objektet på index, index + 1, index + 2 på de positionerna kommer att markeras som smutsiga och utsättas för en ny rendering.

Jag hade ett problem där ändring av ett objekt i vyn krävde en ändring av ett objekt utanför vyn, lösningen var att markera alla objekt som smutsiga checkRange(0, items.length), kanske inte elegant men det fungerar som önskat nu.