代码之家 › 专栏 › 技术社区 › Lee Merlas

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

ionic3 http angular

Lee Merlas · 技术社区 · 6 年前

所以我通过我的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>

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

3 回复 | 直到 6 年前

Sravan 6 年前

如果 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" && *ngIf="!information.length"

注: 最好从后端使用分页。

Pardeep Jain 6 年前

在这方面你不能做任何事情,你可以做的事情要么显示一些静态内容,直到你从后端得到响应,要么只是显示 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>

bereket gebredingle 6 年前

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

您可以轻松地声明布尔变量。当api数据响应时,情况就变了。将此布尔值用作 *ngIf 对于 ion-card
使用库ng忙碌。每当加载数据时显示加载程序。我希望这是一个更好的用户体验更好。 https://www.npmjs.com/package/ng-busy
分页api响应。因此,会显示一些初始项目,然后在用户需要时加载后面的项目。 http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google