显示微调器直到数据反映在DOM角度中

Question

我在表（5000行）中显示了巨大的数据集。 我正在尝试通过使用列过滤器来过滤数据，并在应用该过滤器时保持旋转状态以表明过滤器操作正在进行中

但是，由于在javascript中动作如此之快，因此我将boolean变量用作标志来检查数据是否已过滤/未过滤迅速更改

但是，将新数据反映到DOM大约需要2秒钟。我想在此DOM绑定时间内显示微调器。

HTML：

 <div *ngIf="isFilterClicked" class="col-md-12" style="text-align: center;color: #165cb9;height: 440px;padding-top:100px">
                <px-spinner size="100">
                </px-spinner>
            </div>
        <div *ngFor="let product of products"> 
        </div>

Javascript

this.initialProducts=this.products; //initialize 

filterTable(filterData) {
    this.isFilterClicked = true;
    const result = this.initialProducts.filter(function (o1) {
        return o1.id === filterData.id; // return the ones with equal id
    });
});             
this.products= result ;
this.isFilterClicked = false;
}

Answer 1

您将ngFor完成时将布尔变量设置为flass

<div *ngIf="isFilterClicked" class="col-md-12" style="text-align: center;color: #165cb9;height: 440px;padding-top:100px">
  Loading data....
</div>
<button (click)="filterEvenProducts()">Filter Even</button>
<button (click)="filterOddProducts()">Filter Odd</button>
<div #allProducts *ngFor="let product of products;">
  {{product}}
</div>

组件

export class ProductComponent implements AfterViewInit {

initialProducts = [];
products = [];
isFilterClicked = false;

@ViewChildren('allProducts') things: QueryList<any>;

constructor() {
  for (let i = 0; i < 5000; i++) {
      this.initialProducts.push(`Product ${i}`);
      this.products = this.initialProducts;
    }
  }

filterEvenProducts() {
    this.isFilterClicked = true;
    this.products = this.initialProducts.filter((product, index) => (index % 2) === 0);
  }

  filterOddProducts() {
    this.isFilterClicked = true;
    this.products = this.initialProducts.filter((product, index) => (index % 2) !== 0);
  }

  ngAfterViewInit() {
    this.things.changes.subscribe(t => {
      // to avoid error ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked
      setTimeout(() => {
        this.isFilterClicked = false;
      }, 500);
    });
  }

}