javascript - 显示微调器直到数据反射(reflect)在 DOM-angular 中

Question

我在表中显示了庞大的数据集(5000 行)。 我正在尝试通过列过滤器来过滤数据，当应用相同的过滤器时，我保留了一个微调器以显示过滤操作正在进行中

但是由于在 javascript 中 Action 如此之快，我用作标志以检查数据是否被过滤/未被过滤的 bool 变量很快就会改变

然而，将新数据反射(reflect)到 DOM 中大约需要 2 秒。我想在此 DOM 绑定(bind)时间内显示微调器。

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 完成时，你将 bool 变量设置为 flase

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

}