Ionic virtualScroll does not refresh after list order change

935 views Asked by At

Using Ionic3 and virtualScroll works fine when I sort the list in the constructor but when I use a sort button on my page to change the sort order of the list, the sort is done but the list is not refreshed. I've seen virtualTrackBy but I'm not sure this is what I need since my array is really changing. How can I make sure the list refreshes after I re-sort it ?

constructor() {
  this.users = this.getUsers();
  this.usersSort("FirstName", "(A-Z)"); //Initial state
}
usersSort(key: string, order: string) {
  //sort according to key and order
}
configureItem(item: User) {
  //display item as "FirstName LastName" or "LastName, FirstName"
}
selectFirst() {
  var currentSegment = document.getElementById("segFirst");
  var sortOrder;
  if (this.segSelected === "FirstName") {
    //was already selected --> change sort order
    var currentValue = currentSegment.innerText;
    sortOrder = currentValue.substr(currentValue.length - 5); // (A-Z) or (Z-A)
  } else {
    //newly selected
    document.getElementById("segLast").innerText = "LastName"; //reset other segment
    this.segSelected = 'FirstName';
    sortOrder = "(A-Z)"; // (A-Z) or (Z-A)
  }
  var sortKey = this.segSelected; // FirstName or LastName
  var newOrder = (sortOrder === "(A-Z)") ? "(Z-A)" : "(A-Z)";
  this.usersSort(sortKey, sortOrder);
  var newValue = sortKey + " " + newOrder;
  currentSegment.innerText = newValue;
}
<div class="fixed-header my-segment">
  <ion-segment [(ngModel)]="segSelected" (ionChange)="changeSegment()">
    <ion-segment-button id="segFirst" value="FirstName" (ionSelect)="selectFirst()">FirstName (Z-A)</ion-segment-button>
    <ion-segment-button id="segLast" value="LastName" (ionSelect)="selectLast()">LastName </ion-segment-button>
  </ion-segment>
</div>
<ion-content class="ion-content-below-my-segment">
  <ion-list [virtualScroll]="users">
    <button ion-item *virtualItem="let item" (click)="itemSelected(item)">
        {{configureItem(item)}}
      </button>
  </ion-list>
</ion-content>

Complete code can be found: https://stackblitz.com/edit/ionic-list100k-segment-index

1

There are 1 answers

0
pic On

Problem was in ionic 3.5.2. Fixed with ionic 3.9.2.