Показать элементы, как только он получит первый результат из http GET

Question

Итак, я вызываю свой API через ngOnInit:

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

Это распространенный тип вопросов с разными подходами.

1. легко вы можете объявить логическую переменную. И это становится правдой, когда данные API ответили. Используйте это логическое значение как *ngIf для деления ion-card

2. Использовать библиотеку ng-busy. показывает загрузчик при загрузке данных. Я надеюсь, что это лучше для лучшего UX. https://www.npmjs.com/package/ng-busy

3. Разбить ответ API. Таким образом, некоторые начальные элементы отображаются, а затем загружаются, когда пользователь нуждается. http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google

Answer 2

Если для бэкэнда применимо 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"

Примечание: Будет полезно использовать нумерацию страниц из Backend.

Answer 3

Вы ничего не можете сделать в этом, то, что вы можете сделать, показать статический контент, пока вы не получите ответ от бэкэнда, или просто показать 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>