Question

所以我通过ngOnInit调用我的API：

ngOnInit() {

    this.http
        .get<Config>('http://localhost:5000/api/user/announcements')
        .subscribe((data) => {
            this.information = data.announcements;
            this.datalength = data.announcements.length;
            this.loader.dismiss();
        });
}

我的html看起来像这样：

<ion-card [@flipInX]="flipInX" class="list" *ngFor="let item of information | slice:0:slice;" text-wrap>
        <ion-card-header text-wrap>
            <h2>{{item.title}}</h2>
        </ion-card-header>
        <ion-card-content style="margin-top: -20px; margin-bottom: -25px; font-size: 16px;">
            Date posted: {{item.date}}
        </ion-card-content>
        <button ion-button clear end style="float: right;" (click)="showDetails(item.title, item.date, item.content)">View</button>
    </ion-card>

我注意到显示我的数据需要很长时间，这会导致糟糕的用户体验。如何解决此问题，以便在其余项加载时至少显示初始项？

Answer 1

你无法做任何事情，你可以做的事情要么显示一些静态内容，直到你得到后端的响应或只是显示Loader种类的图像告诉用户他必须等待一段时间来获取数据。

使用一些静态内容，您可以像这样使用您的代码 -

<ion-card [@flipInX]="flipInX" class="list" *ngFor="let item of information | slice:0:slice;" text-wrap>
        <ion-card-header text-wrap>
            <h2>{{item?.title || '-'}}</h2>
        </ion-card-header>
        <ion-card-content style="margin-top: -20px; margin-bottom: -25px; font-size: 16px;">
            Date posted: {{item?.date || '-'}}
        </ion-card-content>
        <button ion-button clear end style="float: right;" (click)="showDetails(item.title, item.date, item.content)">View</button>
    </ion-card>

Answer 2

这是一种常见的问题，有不同的方法。

很容易就可以声明一个布尔变量。当api数据响应时，它变为真实。对*ngIf

ion-card

使用库ng-busy。每当加载数据时显示加载器。我希望这个更好的ux更好。 https://www.npmjs.com/package/ng-busy
对api回应进行分页。因此，显示一些初始项目，并在用户需要时加载后面的项目。 http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google

Answer 3

如果no pagination适用于后端，那么您可以*ngIf并检查information的长度

如果长度为0，则可以显示static值。

  <ion-content *ngIf="!information.length">
        <ion-card text-wrap>
            <ion-card-header text-wrap>
                <h2>{{Laoding}}</h2>
            </ion-card-header>
            <ion-card-content style="margin-top: -20px; margin-bottom: -25px; font-size: 16px;">
                Loading
            </ion-card-content>
        </ion-card>
    </ion-content>

如果长度不是0，您可以显示value，数据会自动更新。

<ion-content *ngIf="information.length">
    <ion-card [@flipInX]="flipInX" class="list" *ngFor="let item of information | slice:0:slice;" text-wrap>
        <ion-card-header text-wrap>
            <h2>{{item.title}}</h2>
        </ion-card-header>
        <ion-card-content style="margin-top: -20px; margin-bottom: -25px; font-size: 16px;">
            Date posted: {{item.date}}
        </ion-card-content>
        <button ion-button clear end style="float: right;" (click)="showDetails(item.title, item.date, item.content)">View</button>
    </ion-card>
</ion-content>

我使用*ngIf="information.length"＆amp;＆amp;添加条件*ngIf="!information.length"

注意：最好从后端使用分页。

一旦从http GET获得第一个结果，就立即显示项目

3 个答案: