无限滚动不显示用户列表，而是仅生成无限的空列表（Ionic 3）

Question

我们尝试为“ ionic 3 Users”列表组件实现无限滚动。问题在于，实现离子的无限滚动组件后，它将破坏用户组件。它没有显示用户，而是显示空列表，并定期生成具有无限滚动的新列表。因此，无限滚动效果很好，但它显示的是空的无限列表，而不是向用户显示。

     constructor( ...) {
          this.socket = io('http://localhost:3000');
          console.log(this.groupFilters);
          for (let i = 0; i < 4; i++) {
            this.filteredUsers.push( this.filteredUsers.length );
          }

      }
    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)
        );
      }
     doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 0; i < 4; i++) {
        this.filteredUsers.push( this.filteredUsers.length );
      }

      console.log('Async operation has ended');
      infiniteScroll.complete();
    }, 500);
  }
    }

HTML

<div class="group">
  <ion-grid>
    <ion-row>
      <ion-col col-6 col-md-4 col-lg-3 col-xl-2 class="created_group" *ngFor="let i of filteredUsers 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>
          <p ion-text color="dark" class="country">
            {{user.country}},{{user.city}}
          </p>
        </div>
      </ion-col>
    </ion-row>
  </ion-grid>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
    <ion-infinite-scroll-content></ion-infinite-scroll-content>
  </ion-infinite-scroll>
</div>