如何在此组件中实现此离子3无限滚动？

Question

我正在尝试在此代码中包含无限滚动。我从ionic 3文档中找到了此组件：https://ionicframework.com/docs/v3/api/components/infinite-scroll/InfiniteScroll/

这也是我们应该在其中实现的组件：

TS

 ngOnInit(): void {
        this.tokenProvider.GetPayload().then(value => {
            this.token = value;
            console.log(this.token);
            this.GetUsers(this.token.username);
        });

        this.socket.on('refreshPage', () => {
            console.log('refreshing page')
            this.tokenProvider.GetPayload().then(value => {
                this.token = value;
                this.GetUsers(this.token.username);
            });
        });
    }


  ngOnChanges(): void {
      console.log(this.groupFilters);
    if (this.groupFilters) this.filterUserList(this.groupFilters, this.users);
  }

  filterUserList(filters: any, users: any): void {
    this.filteredUsers = this.users;     //Reset User List

    const keys = Object.keys(filters);
    const filterUser = user => {
      let result = keys.map(key => {
        if (!~key.indexOf('age')) {
          if(user[key]) {
          return String(user[key]).toLowerCase().includes(String(filters[key]).toLowerCase())
          } else {
            return false;
          }
        }
      });
      // To Clean Array from undefined if the age is passed so the map will fill the gap with (undefined)
      result = result.filter(it => it !== undefined);

      // Filter the Age out from the other filters
      if (filters['ageto'] && filters['agefrom']) {
        if (user['age']) {
          if (+user['age'] >= +filters['agefrom'] && +user['age'] <= +filters['ageto']) {
            result.push(true);
          } else {
            result.push(false);
          }
        } else {
          result.push(false);
        }
      }

      return result.reduce((acc, cur: any) => { return acc & cur }, 1)

    }

    this.filteredUsers = this.users.filter(filterUser);
  }

  GetUsers(name) {
      console.log('Get Users called');
    this.usersProvider.GetAllUsers().subscribe(
      data => {
          console.log(data);
        _.remove(data.result, { username: name });
        this.users = data.result;
          console.log(this.users);
        this.filteredUsers = this.filteredUsers.length > 0 ? this.filteredUsers : this.users;
      },
      err => console.log(err)
    );
  }
}

HTML

<ion-grid>
    <ion-row>
      <ion-col col-6 col-md-4 col-lg-3 col-xl-2 class="created_group" *ngFor="let user of filteredUsers | filter: searchByKeyword: 'name'" (click)="ViewProfile(user)">
        <div class="container">
          <div class="imgs">
            <img class="imgBg" src="http://res.cloudinary.com/testamicin/image/upload/v{{user.picVersion}}/{{user.picId}}">
          </div>
          <p ion-text color="dark">{{user.firstName}} {{user.lastName}}</p>
          <p ion-text color="dark">
            {{user.age}}
          </p>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>

我们如何在用户列表组件中实现提到的ionic 3无限滚动组件？