Как отобразить индикатор выполнения, пока служба все еще получает ответ

Question

У меня есть модальное окно, и я хочу, чтобы индикатор выполнения отображался, пока данные для модального отображения выбираются сервисным вызовом. Но в этом случае сначала выбирается индикатор выполнения, а затем модальный, который отображает индикатор выполнения под модальным. Как это исправить?

 this.service.searchMembers(memSearchJson).subscribe((response: any) => {
// some function
}

<modal id="custom-modal-2">
      <div class="modal">

          </div>
          <div id="memberSearchBar" class="class-hide">
              <mat-spinner></mat-spinner>
              Finding Member IDs..
        </div>
  </modal>

Если document.getElementById ("memberSearchBar"). ClassName = 'loading-div'; вызывается до вызова службы, она выдает ошибку как className null. Где я должен вызвать это, чтобы отобразить индикатор выполнения на модальном?

Answer 1

Я бы рекомендовал использовать * ngIf, как указано выше. Для лучшего понимания я добавляю ссылку на идеальный учебник.

Загрузка прядильщика

Например: в тс:

   showSpinner: boolean = true;
  ngOnInit() {
    this.spinnerShow();
}

если вам нужно показать счетчик, прежде чем вы получите данные, как из службы.

 spinnerShow(){
    this.workflowService.getData().subscribe(()=> 
   this.showSpinner = false);
  }

и в HTML

<div *ngIf="showSpinner"></div>

Извините за мой ужасный английский, но я надеюсь, что это поможет вам. :)

Answer 2

Вместо того, чтобы делать document.getElementById("memberSearchBar").className = 'loading-div', вы можете воспользоваться *ngIf и [class.class-name]="expression"

в Angular * Попробуйте что-то вроде этого

displayModalAndSearchMembers(){
 // using only isLoading should be sufficient, but I wanted to show how you could use [class.classname]="expression" in the html template as well.
 this.isLoading = true; 
 this.showSpinner = true;
 this.displayModal = true;

 this.service.searchMembers(memSearchJson).subscribe((response: any) => {
  // some function
  this.isLoading = false;
  this.showSpinner = false;
 }
}

<modal id="custom-modal-2">
      <div *ngIf="displayModal" class="modal"> <!-- added *ngIf -->

          </div>
          <div id="memberSearchBar" *ngIf="showSpinner" [class.loading-div]="isLoading">
              <mat-spinner></mat-spinner>
              Finding Member IDs..
        </div>
  </modal>

РЕДАКТИРОВАТЬ

Вы также можете использовать *ngIf="displayModal" и на модале, если у вас тоже есть display: none на этом.

Я также добавил некоторый код TS.Я не уверен на 100%, что хочет желаемое ОП, но я предполагаю, что она хочет показать / скрыть счетчик и задать для него имя класса.

Это можно упростить, используя только *ngIf="isLoading":

<div id="memberSearchBar" class="loading-div" *ngIf="showSpinner">