Question

在处理某些数据之前，很难显示加载图形。当前，该图形仅在所有处理完成后显示（当我注释掉this.showLoader = false时）。出于绝望，我使图形切换方法返回一个诺言，该诺言一旦解决，将允许执行处理。但是，直到处理完成后，图形仍不会显示。似乎showLoader = true和showLoader = false是同时发生的，即使我将它们与promise分开了也是如此。当我取消注释this.showLoader = false时，该图形将永远不会显示。

我的第一次尝试仅使用了一个方法clickFilter（），该方法将showLoader属性设置为true，处理数据，然后将showLoader设置为false。当我在浏览器中运行组件时，加载程序从未显示出来。因此，在处理之后，我注释掉了将showLoader设置为false的行。然后，当我在浏览器中运行该程序时，将显示加载图形，但仅在数据完成处理之后。

然后，我决定使图形切换一个返回诺言的方法。我的目的是将图形切换为true，完成后再处理数据。但是我得到的结果和以前一样。当我注释掉this.showLoader = false时，该图形从不显示，仅在数据处理后显示。

  toggleLoader() {
    return new Promise((resolve, reject) => {
      this.showLoader = true;
      console.log(this.showLoader);
      resolve();
    });
  }
  doFilter(date: string) {
    ...
    filter code
    ...
    this.showLoader = false;
  }
  clickFilter(date: string): any {
    this.toggleLoader().then(res => this.doFilter(date));
  }

和标记：

...
<td mat-cell *matCellDef="let item" class="item" (click)="clickFilter($event.target.innerText)">{{ item.TxnDate }}</td>
...
<div class="loader" *ngIf="showLoader"></div>
<img class="loader-logo" src="../../assets/images/icon_brakecheck.png" *ngIf="showLoader" />

预期行为：用户单击元素->加载图形显示->数据已处理->数据表已更新->加载图形消失了。

实际行为：用户单击元素-> 5秒钟没有任何反应（正在处理数据）->数据表已更新，并且加载图形从不显示。

Answer 1

所以我找到了自己的问题的答案：

我不确定为什么决定开始工作，但现在开始工作。我曾尝试将doFilter放在setTimeout中，但对我而言不起作用。与使doFilter返回promise一样。因此，今天我出于绝望而开始在圈子中编码自己，并在doFilter上重试了setTimout，它开始起作用。尽管大约有五分之一的刷新页面并运行报告，但加载程序并未显示在FIRST的第一次点击中，其他所有点击都起作用。但是再次发生这种情况，可能是每5页重新加载一次。它足以让我称其为好并提供此答案。

以下是实现此目的的代码：

  doFilter(date: string): any {
    let last = this.dateSumsPrint.length;
    last = last - 1;
    // debugger;
    if ( date !== 'Grand Total' ) {
      if ( this.dateSumsPrint[last].showRows ) {
        this.dataSource.data = this.dateSumsPrint;
        this.dateSumsPrint[last].showRows = false;
      } else {
        for ( const item of this.dateSumsPrint ) {
          if ( item.TxnDate === date ) {
            if ( item.showRows ) {
              this.dataSource.data = this.dateSumsPrint;
              item.showRows = false;
            } else {
              this.dataSource.data = item.Txns;
              item.showRows = true;
            }
          }
        }
      }
    } else if ( date === 'Grand Total' ) {
      if ( this.dateSumsPrint[last].showRows ) {
        this.dataSource.data = this.dateSumsPrint;
        this.dateSumsPrint[last].showRows = false;
      } else {
        this.dataSource.data = this.dateSumsPrint[last].Txns;
        this.dateSumsPrint[last].showRows = true;
      }
    }
    this.showLoader = !this.showLoader;
  }
  clickFilter(date: string): void {
    this.showLoader = !this.showLoader;
    console.log(this.showLoader);
    setTimeout(() => this.doFilter(date), 0);
    // this.doFilter(date);
  }

同样，我的实际解决方案是这一行：

setTimeout(() => this.doFilter(date), 0);

我希望这对以后的人有所帮助。

问题：处理完数据后而不是之前加载图形显示

1 个答案: