【问题标题】:Ionic virtualScroll does not refresh after list order change列表顺序更改后 Ionic virtualScroll 不刷新
【发布时间】:2018-08-08 13:20:37
【问题描述】:

当我在构造函数中对列表进行排序时,使用 Ionic3 和 virtualScroll 可以正常工作,但是当我使用页面上的排序按钮来更改列表的排序顺序时,排序完成但列表没有刷新。我见过 virtualTrackBy 但我不确定这是我需要的,因为我的数组真的在变化。重新排序后如何确保列表刷新?

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>

完整代码可见: https://stackblitz.com/edit/ionic-list100k-segment-index

【问题讨论】:

    标签: angular ionic-framework angularjs-track-by virtualscroll


    【解决方案1】:

    问题出在 ionic 3.5.2 中。 已在 ionic 3.9.2 中修复。

    【讨论】:

      猜你喜欢
      • 2010-11-10
      • 2023-03-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-01-05
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多