Infinite scroll is not working with segment

Ionic Framework ionic-v3
1

infinite scroll is not working with segment.how can i do the infinite scroll with segment,please help me anyone and if possible to give me a example of code.

2

Show a little snipet of what you did tried and what is the error.

3

@arnoldparge
content is not loading.
Below html code

<div [ngSwitch]="section">
    <div *ngSwitchCase="'allquotes'">
      <div class="quotes-list" *ngFor="let item of items">
        <ion-card>
          <ion-item>
            <ion-avatar item-start> <img src="https://avatars.io/facebook/joshua.morony"> </ion-avatar>
<!--            <p>{{item._embedded.author[0].name}}
            <p>
            <p>{{item._embedded['wp:term'][0][0].name}}</p>-->
          </ion-item>
          <img *ngIf="item.featured_image_urls && item.featured_image_urls.thumbnail" [src]="item.featured_image_urls.thumbnail">
          <ion-card-content>
            <p [innerHTML]="item.content.rendered"></p>
          </ion-card-content>
          <ion-row>
            <ion-col center text-center>
              <button ion-button icon-left clear small>
              <ion-icon name="thumbs-up"></ion-icon>
              <div>12 Likes</div>
              </button>
            </ion-col>
            <ion-col center text-center>
              <button ion-button icon-left clear small (click)="shareItem(item)">
              <ion-icon name="share"></ion-icon>
              </button>
            </ion-col>
            <ion-col center text-center>
              <button ion-button icon-left clear small>
              <ion-icon name="heart"></ion-icon>
              </button>
            </ion-col>
          </ion-row>
        </ion-card>
      </div>
            <ion-infinite-scroll (ionInfinite)="loadMore($event)">
            <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data..."></ion-infinite-scroll-content>
            </ion-infinite-scroll>
    </div>
    <div *ngSwitchCase="'latestquotes'">
      <div class="latest-quotes" *ngFor="let something of somethings">
        <ion-card>
          <ion-item>
            <ion-avatar item-start> <img src="https://avatars.io/facebook/joshua.morony"> </ion-avatar>
            <h2>Marty McFly</h2>
            <p>November 5, 1955</p>
          </ion-item>
          <img *ngIf="item.featured_image_urls && item.featured_image_urls.thumbnail" [src]="item.featured_image_urls.thumbnail">
          <ion-card-content>
            <p [innerHTML]="item.content.rendered"></p>
          </ion-card-content>
          <ion-row>
            <ion-col center text-center>
              <button ion-button icon-left clear small>
              <ion-icon name="thumbs-up"></ion-icon>
              <div>12 Likes</div>
              </button>
            </ion-col>
            <ion-col center text-center>
              <button ion-button icon-left clear small>
              <ion-icon name="share"></ion-icon>
              </button>
            </ion-col>
            <ion-col center text-center>
              <button ion-button icon-left clear small>
              <ion-icon name="heart"></ion-icon>
              </button>
            </ion-col>
          </ion-row>
        </ion-card>
      </div>

  
    </div>

    <div *ngSwitchCase="'favouritequotes'">
      <div class="favourite-quotes" *ngFor="let something of somethings">
        <ion-card>
          <ion-item>
            <ion-avatar item-start> <img src="https://avatars.io/facebook/joshua.morony"> </ion-avatar>
            <h2>Marty McFly</h2>
            <p>November 5, 1955</p>
          </ion-item>
          <img *ngIf="item.featured_image_urls && item.featured_image_urls.thumbnail" [src]="item.featured_image_urls.thumbnail">
          <ion-card-content>
            <p [innerHTML]="item.content.rendered"></p>
          </ion-card-content>
          <ion-row>
            <ion-col center text-center>
              <button ion-button icon-left clear small>
              <ion-icon name="thumbs-up"></ion-icon>
              <div>12 Likes</div>
              </button>
            </ion-col>
            <ion-col center text-center>
              <button ion-button icon-left clear small>
              <ion-icon name="share"></ion-icon>
              </button>
            </ion-col>
            <ion-col center text-center>
              <button ion-button icon-left clear small>
              <ion-icon name="share"></ion-icon>
              </button>
            </ion-col>
          </ion-row>
        </ion-card>
      </div>
    </div>
  </div>

Below .ts

export class PostsPage {

	private url: string = 'http://mydomainname/ionic2/sumitdemo/quotes/wp-json/wp/v2/posts';
	items: any;
	section: string = 'allquotes';
	page: any;
		 
  constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http, public popoverCtrl: PopoverController, private socialSharing: SocialSharing) {}
  
ionViewDidEnter() {

  this.page = '1';

  this.loadPosts( this.page ).then( data => {
   //console.log('Posts loaded', data);
   this.items = data;
   //alert(JSON.stringify(this.items));
  });
 }

 loadPosts( page ) {

  if( !page ) {
       let page = '1';
     }

  return new Promise(resolve => {

   this.http.get( this.url + '?page=' + page )
      .map(res => res.json())
      .subscribe(data => {
        // we've got back the raw data, now generate the core schedule data
        // and save the data for later reference
        resolve( data );
      });

  });
 }
 loadMore(infiniteScroll) {


     this.page++;

     this.loadPosts( this.page ).then( items => {
       // Loads posts from WordPress API
       let length = items["length"];

       if( length === 0 ) {
         infiniteScroll.complete();
         return;
       }

       for (var i = length - 1; i >= 0; i--) {
         this.items.push( items[i] );
       }

   
   infiniteScroll.enable(false);
   
     });
 }
}

output.

error
error.PNG1252×810 37.6 KB