加载旋转器即使在angular中显示其真实状态

Question

我有一个很简单的加载器:

<div *ngIf="loadingSpinner" class="k-i-loading"></div>

在我的。ts类之上，我设置它为false:

public loadingSpinner:boolean=false;

我想在执行以下函数时将其设置为true:

<div class="card" (click)="SendToBank()">
<div *ngIf="loadingSpinner" class="k-i-loading"></div>
</div>

在我的函数开始时，我将其设置为true开始显示，直到数据从后端获取，一旦它完成设置为false再次，我做错了，我不能看到旋转器后的功能被击中?

SendToBank(){
this.loadingSpinner=true;
this.http.get(`http://localhost:44301/consentinitiation/${this.qid}`)
.pipe(retryWhen(_ => {
this.showIt=true
return interval(1000)
}))
.subscribe(result => {result
console.log(result);
this.qrcodelink=result["qrCodeLink"];
this.loadingSpinner=false;
})
}

Answer 1

您可以验证此"SendToBack"函数在点击时被调用?另外，

里面没有任何代码

<div *ngIf="loadingSpinner" class="k-i-loading"></div>

所以它只是一个空的div标签，也许这就是为什么你看不到任何东西。

你也可以尝试使用

SendToBank(){
this.loadingSpinner=true;
this.http.get(`http://localhost:44301/consentinitiation/${this.qid}`)
.pipe(retryWhen(_ => {
this.showIt=true
return interval(1000)
}))
.subscribe(result => {result
console.log(result);
this.qrcodelink=result["qrCodeLink"];
setTimeout(() => {
this.loadingSpinner=false;
}, 5000);

})
}

如果这些都不起作用，那么请提供该类的代码"k-i-loading"。我很乐意帮忙。