加载微调框不会出现延迟

问题描述

正在加载加载微调器，并在延迟后消失，但它根本没有出现，但是如果我删除“ this.isLoading = false”行，则微调器会显示但不会消失！

 const myObservable = of("foobar");

    myObservable.subscribe((value) => {

      this.isLoading = true,delay(5000),// If i remove the line below the spinner is showing
        this.isLoading = false

      console.log(value);  
    });

解决方法

delay()是rxjs运算符。用法如下：

of("foobar").pipe(
  tap(_ => {this.isLoading = true}),delay(5000),tap(_ => {this.isLoading = false}),).subscript()

,

我会说最好使用tap和finalize运算符来控制微调框的可见性，而不是固定的时间。

尝试以下

控制器

isLoading = false;

myObservable.pipe(
  tap(_ => this.isLoading = true),// <-- triggered as soon the subscription is invoked
  finalize(_ => this.isLoading = false)   // <-- triggered when the observable completes
).subscribe((value) => {
  console.log(value);  
});

模板

<ng-container *ngIf="isLoading">
  <!-- show spinner -->
</ng-container>