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

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;
}

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

How use setTimeout for *ngIf in angular 10 for the ionic spinner

settimeout

loading

angular-ng-if

ionic5