CODEWITHSUNDEEP
angularionic-frameworkangularjs-track-byvirtualscroll
pic
pic

Reputation: 11

Ionic virtualScroll does not refresh after list order change

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

Upvotes: 0

Views: 939

Answers (1)

pic
pic

Reputation: 11

Problem was in ionic 3.5.2. Fixed with ionic 3.9.2.

Upvotes: 0

Related Questions