如何将setTimeout用于离子微调器的角度为10的*ngIf

Question

如果应用程序仍在从服务器加载数据，则我将在加载2秒后显示一个离子加载指示符，否则不会显示。这是微调器的html。

<!-- Loading -->
<div class="ion-text-center" *ngIf="isLoading && timer == 0">
<ion-spinner name="dots" color="light"></ion-spinner>
</div>

在页面组件中，每次加载新帖子时，我都会将isLoading设置为true。在setPostData中，我会将其设置回false。但将其与计时器结合起来是行不通的。

posts: any = [];
timer: any = 0;
isLoading: boolean;
constructor(){...}
getPostData(){
this.timer = setTimeout(() => {}, 2000);
this.isLoading = true;
this.postService.getPosts().subscribe(
(result) => {
this.setPostData(result);
}
);
}
setPostData(data){
this.posts = data.posts;
this.isLoading = false;
}

Answer 1

我会找到另一种方法。创建一个计时器(setTimeout(并绑定toggleLoading函数。在setPostData函数中，清除创建的计时器。因此，在2500毫秒后，加载开始。如果未达到2500毫秒，则计时器将被清除，并且装载点不会按要求显示。

posts: any = [];
timer
isLoading: boolean;
constructor(){...}
toggleLoading(){
this.isLoading = !this.isLoading;
}
getPostData(){
this.timer = setTimeout(this.toggleLoading.bind(this), 2500);
this.postService.getPosts().subscribe(
(result) => {
this.setPostData(result);
}
);
}
setPostData(data){
this.posts = data.posts;
if(this.timer) {
clearTimeout(this.timer);
}
this.isLoading = false;
}