【ionic2】無限スクロールの使い方

なかなか手をだせにずにいたionic2を次の案件では使えるように準備中。とりあえずionic1でできてたことをionic2でもできるようになることが当面の目標。今回はapiから取得したjsonからリスト表示で、無限スクロールを実装してみる。

blankでプロジェクト作成

$ ionic start test blank

まずはhttpをつかえるように。

app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';

・・・

import { HttpModule } from '@angular/http'; ## ★ これを追加

@NgModule({

    ・・・　

    imports: [
        BrowserModule,
        IonicModule.forRoot(MyApp),
        HttpModule ## ★ これを追加
    ],

    ・・・　

})
export class AppModule {}

つづいてコントローラ?を実装

src/pages/home/home.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
c})
export class HomePage {

  page = 1;
  items = [];
  completed = false;

  constructor(public http: Http) {
    this.getUsers().subscribe(data => {
      if (0 < data.users.length) {
        this.items = this.items.concat(data.users);
        this.page++;
      } else {
        this.completed = true;
      }
    });
  }

  doInfinite(infiniteScroll) {
    this.getUsers().subscribe(data => {
      if (0 < data.users.length) {
        this.items = this.items.concat(data.users);
        this.page++;
      } else {
        this.completed = true;
      }
      infiniteScroll.complete();
    });
  }

  getUsers() {
    return this.http
      .get('http://localhost:3000/users?page=' + this.page)
      .map(res => res.json());
  }

}

さいごにテンプレートを実装

src/pages/home/home.html

・・・

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let item of items">
      {{ item.name }}
    </ion-item>
  </ion-list>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="completed">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</ion-content>

typescriptとかrxjsとかまだ全然わかってないけどとりあえずこれでできた。以上です。