Ionic3 VirtualScroll:更新前显示微调器，更新完成后隐藏微调器

Question

在Ionic3中，我使用的是VirtualScroll和一个不断变化的数组(排序键和排序顺序)。我想在操作数组之前显示一个微调器，并在操作完成后隐藏它。基本上

.html

<ion-list [virtualScroll]="vsArray">
    <button ion-item *virtualItem="let item" (click)="didSelectRow(item)">
        {{item}}
    </button>
...

.ts

document.getElementById("mySpinner").setAttribute('style', 'visibility:visible');
tmpArray = vsArray;    //prevent virtualScroll reset/trigger
tmpArray.sort(...);    //prepare array
vsArray = tmpArray;    //trigger virtualScroll update
document.getElementById("mySpinner").setAttribute('style', 'visibility:hidden');

问题是旋转器DOM更新是按顺序发生的，而由vsArray更改触发的VirtualScroll更新在此代码序列之后异步发生。我尝试使用DOMController.write而不是直接访问DOM，但我有相同的行为，因为微调器DOM更新在VirtualScroll DOM更新之前排队。

如何确保微调器仅在VirtualScroll更新完成后隐藏？

感谢您的意见

Answer 1

Ionic 3提供了您可以使用的<ion-spinner></ion-spinner>组件。将其添加到<ion-list>顶部的某个位置。并且，向其添加一个*ngIf以显示和隐藏它。

<ion-spinner *ngIf="showSpinner"></ion-spinner>
<ion-list ...>

@Component({ ... })
export class ComponentName {
  showSpinner:boolean = true; // default so it shows 

  getDataForIonList() {
     this.someAPI.get()
     .then((res:any) => {
        this.showSpinner = false;
     });
  }

}