Spinner loader 没有隐藏

Question

我正在使用“ngx-spinner”：“8.1.0”，微调器显示在用于从服务器获取数据的方法中的 tap() 中。微调器显示但当试图在 finalize() 上隐藏它时没有被隐藏一点也不。任何提示可能是问题所在？来自服务器的数据被接收并正确显示在视图中。

//component.ts

  ngAfterViewInit() {
    this.subscriptions.add(
      this.organizationsService.organizations$
        .pipe(
          tap(() => {
            this.spinnerService.showLoader();
          }),
          finalize(() => {
            this.spinnerService.hideLoader();
          }),
          takeUntil(this.destroySubject))
        .subscribe(response => {
          console.log('OUTPUT: OrganizationsListComponent -> ngAfterViewInit -> response', response);
          this.cachedFacts = this.cachedFacts.concat(response);
          if (!this.searchService.search.value.length) {
            this.dataSource.data = this.cachedFacts as IOrganizations[];
            this.dataSource.sort = this.sort;
          } else {
            this.dataSource.data = response as IOrganizations[];
            this.cachedFacts = [];
          }
          this.filterSelectObj.filter((o) => {
            o.options = this.getFilterObject(this.dataSource.data, o.columnProp);
          });
        }, (error) => {
          this.errorService.handleError(error);
        })
    );

  }

service.ts

this.organizations$ = combineLatest([this.pageSubject, this.searchService.search]).pipe(
      tap(([page, searchTerm]) => { console.log('search and page number', page, searchTerm); }),
      switchMap(([page, searchTerm]) => {
        let params: HttpParams;
        if (!searchTerm.length) {
          params = new HttpParams()
            .set('_page', page.toString());
        } else {
          params = new HttpParams()
            .set('q', searchTerm);
        }
        const apiUrl = this.http.get<IOrganizations[]>(`${this.apiUrl}`, { observe: 'response', params });
        return apiUrl.pipe(
          map((result) => {
            const totalCount = result.headers.get('x-total-count');
            this.totalOrganizationsCount.next(totalCount);
            this.cachedOrganizationsList.next(result.body);
            return result.body;
          })
        );
      })
    );

spinner.service.ts

@Injectable()
export class SpinnerService {
  constructor(private spinnerService: NgxSpinnerService) { }

  public showLoaderSubject = new BehaviorSubject<boolean>(false);

  showLoader() {
    this.showLoaderSubject.next(true);
    this.spinnerService.show();
  }

  hideLoader() {
    this.showLoaderSubject.next(false);
    this.spinnerService.hide();
  }
}

spinner.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { SpinnerComponent } from './spinner.component';
import { NgxSpinnerModule, NgxSpinnerService } from 'ngx-spinner';
import { SpinnerService } from '@shared/services/spinner.service';
import { AngularMaterialModule } from '@app/angular-material/angular-material.module';

@NgModule({
  imports: [
    CommonModule,
    NgxSpinnerModule,
    AngularMaterialModule
  ],
  declarations: [SpinnerComponent],
  exports: [SpinnerComponent],
  providers: [SpinnerService, NgxSpinnerService]
})
export class SpinnerModule { }

感谢任何提示

Answer 1

RxJS finalize 操作符只会在源 observable 完成或出错时触发。看到你的 observable organizations$ 拥有一个来自 combineLatest 函数的 observable，它可能还没有完成。因此，您可以将微调器隐藏在订阅中，而不是使用 finalize。

试试下面的

ngAfterViewInit() {
  this.subscriptions.add(
    this.organizationsService.organizations$.pipe(
      tap(() => this.spinnerService.showLoader()),          // <-- no `finalize` here
      takeUntil(this.destroySubject)
    ).subscribe(response => {
        console.log('OUTPUT: OrganizationsListComponent -> ngAfterViewInit -> response', response);
        this.cachedFacts = this.cachedFacts.concat(response);
        if (!this.searchService.search.value.length) {
          this.dataSource.data = this.cachedFacts as IOrganizations[];
          this.dataSource.sort = this.sort;
        } else {
          this.dataSource.data = response as IOrganizations[];
          this.cachedFacts = [];
        }
        this.filterSelectObj.filter((o) => {
          o.options = this.getFilterObject(this.dataSource.data, o.columnProp);
        });

        this.spinnerService.hideLoader();         // <-- hide the spinner here
      }, (error) => {
        this.errorService.handleError(error);
      })
  );
}