Ion Inifinte Scroll 未显示在空白页面中

Question

我知道 ionInfiniteScroll 的全部目的是加载更多项目。然而，当我调用一个需要一些时间来响应的 api 时，我想在加载第一个项目之前在页面顶部使用 ionInfiniteScroll ...（然后显然以原始方式使用它）。我喜欢它的工作方式，当我已经拥有我需要的东西时，我不想创建一个孔预加载器。

但是

当页面为空且无法滚动时，ionInfiniteScroll 不起作用。 我能做什么？

<app-page>
<div class="py-2">
    <announcement-post *ngFor="let post of posts" [data]="post"
        (reacted)="onReacted(post.id, $event)" [user]="userinfo"></announcement-post>
    <ion-infinite-scroll *ngIf="loadMore" (ionInfinite)="onIonInfinite($event)">
        <ion-infinite-scroll-content loadingText="Please wait..." loadingSpinner="bubbles"></ion-infinite-scroll-content>
    </ion-infinite-scroll>
    {{loadMore}} <!-- Outputs true -->
    
</div>
</app-page>

注意没有错误被抛出

之前是怎么运作的

posts:any[] = [];
page:number = 1

ngOnInit() {
   this.http.get<any[]>("foobar.com").subscribe(res => this.posts = res);
}

onIonInfinite($event) {
   this.http.get<any[]>("foobar.com?page="+this.page).subscribe(res => { this.posts.push(...res); this.page++; $event.target.complete(); });
}

然后在它加载后我向下滚动并且它有效。我删除了 ngOnInit 以便可以从 onIonInifinte 调用 api

posts:any[] = [];
page:number = 0;

onIonInfinite($event) {
   this.http.get<any[]>("foobar.com?page="+this.page).subscribe(res => { this.posts.push(...res); this.page++; $event.target.complete(); });
}