ngx-loading，Angular 7。始终显示微调器答案

【问题标题】：ngx-loading, Angular 7. Spinner is always displayedngx-loading，Angular 7。始终显示微调器
【发布时间】：2020-12-05 02:13:29
【问题描述】：

我在获取服务器响应时使用 ngx-loading 显示微调器。它运行良好：在请求发送时显示微调器，并在应用程序获得服务器响应时隐藏微调器。但是，如果我在显示微调器的区域时单击它，微调器不会隐藏，并且其他单击或按钮也无济于事。

LoadingModule 已正确导入

import { LoadingModule } from 'ngx-loading';
...
@NgModule({
  imports: [
  ...
  LoadingModule,
  ...

component.html:

<ngx-loading [show]="loading"></ngx-loading>

component.ts:

public loading = false;
...
search = (text$: Observable<string>) =>
    text$.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      tap(term => this.loading = !!term.length),
      switchMap(term => term.length > 0
        ? this.layersService.getLayerByID(term).pipe(
          tap(data => this.searchFailed = false),
          catchError((error) => {
            this.searchFailed = true;
            this.loading = false;
            this.toastr.error(JSON.stringify(error.error), 'Server error',
              {timeOut: 3000, positionClass: 'toast-bottom-right', tapToDismiss: false, closeButton: true});
            return observableOf([]);
          })
        )
        : []),
      tap(() => this.loading = false));

【问题讨论】：

您能否尝试在堆栈闪电战中重现该问题？这也可能是一个错误......

标签： angular ngx-loading

【解决方案1】：

试试这个：

<ngx-loading [show]="!!loading"></ngx-loading>

Javascript 将假定字符串“false”为真，因为这是一个 Truthy 值。 javascript 中的Bang Bang 将为您提供 Truthy 和 Falsy 值

【讨论】：

添加关于您的代码如何/为何解决问题（甚至问题是由什么引起的）的简要说明将大大改善您的答案，并可能吸引更多的赞成票。

【解决方案2】：

不知道对你有没有帮助但尝试添加以下行：


    constructor(private spinner: NgxSpinnerService) { }

    ngOnInit() {
        setTimeout(() => { this.spinner.show(); }, 25);
    }

    ngOnDestroy(): void {
        this.spinner.hide();
    }

【讨论】：

感谢您的回答，但是 NgxSpinnerService 不是 ngx-loading 模块的一部分（我使用的是 3.0.1 版本）。