Ionic 3 показывает первые 10 массивов, затем после 10

Question

Мне нужно знать, что я получаю данные из API.Мне нужно показать первые 10 массивов.Затем, когда пользователь прокручивает, покажите 10, как это.Как я могу это сделать ?

this.item = this.http.get('https://afaq-manda.com/api/');


this.item.subscribe(data => {
    loading.dismiss();

 this.data = data;
  console.log('my data: ', this.data);
})

Вот как я получаю данные.Спасибо

Answer 1

ВЫ МОЖЕТЕ ДЕЛАТЬ ЭТО ДВЕ ПУТИ

Контент с бесконечной прокруткой бесконечномерным прокрутки содержимого

Компонент ion-infinite-scroll имеет логику бесконечной прокрутки. Для отображения содержимого требуется дочерний компонент. Ionic по умолчанию использует компонент ion-infinite-scroll-content. Этот компонент отображает бесконечную прокрутку и изменяет внешний вид в зависимости от состояния бесконечной прокрутки. Он отображает счетчик, который выглядит лучше всего в зависимости от платформы, на которой работает пользователь. Тем не менее, спиннер по умолчанию можно изменить и добавить текст, установив свойства компонента ion-infinite-scroll-content.

В ИОННОМ ВИДЕ

<ion-content>
  <ion-button (click)="toggleInfiniteScroll()" expand="block">
    Toggle Infinite Scroll
  </ion-button>

  <ion-list></ion-list>

  <ion-infinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
    <ion-infinite-scroll-content
      loadingSpinner="bubbles"
      loadingText="Loading more data...">
    </ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

в .ts

 import { Component, ViewChild } from '@angular/core';
    import { IonInfiniteScroll } from '@ionic/angular';

    @Component({
      selector: 'infinite-scroll-example',
      templateUrl: 'infinite-scroll-example.html',
      styleUrls: ['./infinite-scroll-example.css']
    })
    export class InfiniteScrollExample {
      @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

      constructor() {}

      loadData(event) {
        setTimeout(() => {
          console.log('Done');
          event.target.complete();

          // App logic to determine if all data is loaded
          // and disable the infinite scroll
          if (data.length == 1000) {
            event.target.disabled = true;
          }
        }, 500);
      }

      toggleInfiniteScroll() {
        this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
      }

}

Второй способ

NGX-пагинация

Простой пример

app.module.ts

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module
import {MyComponent} from './my.component';

@NgModule({
    imports: [BrowserModule, NgxPaginationModule], // <-- include it in your app module
    declarations: [MyComponent],
    bootstrap: [MyComponent]
})
export class MyAppModule {}

my.component.ts

import {Component} from '@angular/core';

@Component({
    selector: 'my-component',
    template: `
    <ul>
      <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
    </ul>

    <pagination-controls (pageChange)="p = $event"></pagination-controls>
    `
})
export class MyComponent {
    p: number = 1;
    collection: any[] = someArrayOfThings;  
}

NGX-пагинация

Answer 2

Для этого вы можете использовать бесконечный свиток. HTML:

  <ion-list>
   <ion-item *ngFor="let i of itemsToDisplay">{{i}}</ion-item>
 </ion-list>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
       <ion-infinite-scroll-content></ion-infinite-scroll-content>
     </ion-infinite-scroll>

Компонент:

   itemsToDisplay =[];
    ngOnInit()
    {
     this.item = this.http.get('https://afaq-manda.com/api/');
     this.item.subscribe(data => {
      this.data = data;
      for(let i=0; i< 10; i++)
      {
       this.itemsToDisplay.push(this.data[i]);
      }
     })
    }

    doinfinite(){
     let len = this.itemsToDisplay.length;
     for(let i=len ; i< len+10; i++)
     {
       this.itemsToDisplay.push(this.data[i]);
     }
   }

Пожалуйста, обратитесь это: https://ionicframework.com/docs/v3/api/components/infinite-scroll/InfiniteScroll/