Проблема: загрузка графических дисплеев ПОСЛЕ обработки данных, а не до - PullRequest
Новая
       5

Проблема: загрузка графических дисплеев ПОСЛЕ обработки данных, а не до

0 голосов
/ 19 июня 2019

Трудно получить загрузочную графику для отображения ДО обработки некоторых данных. В настоящее время график отображается только ПОСЛЕ того, как вся обработка завершена (когда я закомментирую this.showLoader = false). В отчаянии я заставил метод графического переключения возвращать обещание, которое после разрешения позволяет выполнить обработку. НО графика все еще не появляется, пока не закончится обработка. Похоже, что showLoader = true и showLoader = false происходят одновременно, хотя я разделил их обещанием. Когда я раскомментирую 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 секунд ничего не происходит (во время обработки данных) -> таблица данных обновляется, и загружаемая графика никогда не отображается.

1 Ответ

0 голосов
/ 21 июня 2019

Итак, я нашел ответ на свой вопрос:

Я не уверен, почему он решил начать работать, но сейчас работает. Я пытался поместить doFilter в setTimeout, но у меня это не сработало. То же самое с тем, что doFilter возвращает обещание. Итак, сегодня я начал отчаянно кодировать себя в кругах и перепробовал setTimout на doFilter, и он начал работать. Хотя примерно в 1 из 5 раз я обновляю страницу и запускаю отчет, загрузчик не появляется при первом щелчке, все остальные щелчки работают. Но, опять же, это происходит, может быть, 1 из каждых 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);

Я надеюсь, что это поможет кому-то в будущем.

...