当我在构造函数中对列表进行排序时,使用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
发布于 2018-03-01 03:02:47
问题出现在ionic 3.5.2中。已使用ionic 3.9.2修复。
https://stackoverflow.com/questions/49033339
复制相似问题