angular - 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;
     });
  }

}