Показывать данные вращения прядильщика в DOM-angular - PullRequest
Новая
       10

Показывать данные вращения прядильщика в DOM-angular

0 голосов
/ 05 сентября 2018

У меня огромный набор данных, отображаемый в таблице (5000 строк). Я пытаюсь отфильтровать данные, используя фильтр столбцов, и при применении того же самого я держал счетчик, чтобы показать, что операция фильтра выполняется

Но поскольку в javascript действие настолько быстрое, логическая переменная, которую я использовал как флаг для проверки того, что данные отфильтрованы / не отфильтрованы, быстро изменяется

Однако для отображения свежих данных в 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>

1010 * 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; }

1 Ответ

0 голосов
/ 05 сентября 2018

Вы устанавливаете логическое значение varibale в состояние «вспышка», когда ngFor завершает 

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

}
...