ionic4 githubUsersの一覧をinfiniteScrollで表示する

前回のgithubUsers一覧を編集して無限スクロールでユーザ表示を行う。

前回作った一覧ページgithub page(ts, html)を修正

# github.page.ts
import { Component, OnInit } from '@angular/core';
import { GithubService } from '../github.service';

@Component({
  selector: 'app-github',
  templateUrl: './github.page.html',
  styleUrls: ['./github.page.scss'],
})
export class GithubPage implements OnInit {
  users:any = [];
+  next: number = 0;

  constructor(
    private githubService: GithubService
  ) {
    this.getUserList();
  }

  ngOnInit() {
  }

+  doInfinite(infiniteScrollEvent) {
+    this.getUserList();
+    infiniteScrollEvent.target.complete();
+  }

  getUserList() {
-    this.githubService.getUsers().subscribe(data => {
-    this.users = data;
+    this.githubService.getUsers(this.next).subscribe(data => {
+      if(this.next === 0) {
+        this.users = data;
+      } else {
+        Object.values(data).map(_ => this.users.push(_));
+      }
+      this.next = Object.values(data).slice(-1)[0].id;
    },err => {
      console.log(err);
    });
  }
}

# github.page.html
<ion-header>
  <ion-toolbar>
    <ion-title>github</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let user of users">
      <ion-avatar item-start>
        <ion-img [src]="user.avatar_url"></ion-img>
      </ion-avatar>
      {{ user.id }} {{ user.login }}
    </ion-item>
  </ion-list>
</ion-content>
+ <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
+    <ion-infinite-scroll-content></ion-infinite-scroll-content>
+  </ion-infinite-scroll>

上記の変更により無限スクロールを実現できる。
時間がなかったのでとりあえず動くものをコミットしたけど次回はもう少しangularらしいコードに修正してみます。

今回のコードはこちら