如何使用 setTimeout for *ngIf in angular 10 for the ionic spinner答案

【问题标题】：How use setTimeout for *ngIf in angular 10 for the ionic spinner如何使用 setTimeout for *ngIf in angular 10 for the ionic spinner
【发布时间】：2021-06-21 19:43:38
【问题描述】：

如果应用程序仍在从服务器加载数据，我将在加载 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;
}

【问题讨论】：

标签： settimeout loading angular-ng-if ionic5

【解决方案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;
}

【讨论】：