Angular2 Infinite Scroll implementation

Question

I am using angular2-infinite-scroll for my project. My idea is first time page will loads 6 items, and then each time I scroll to the end of page, it should render 6 items more.

But when I scroll, it loads continuously and never stop, although I have only 15 items in my JSON file.

Here is my ReviewComponent.ts:

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { ApiService } from '../../services/api.service';
import { Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Review } from '../../model/review.model';
import { InfiniteScroll } from 'angular2-infinite-scroll';

@Component({
  selector: 'app-home',
  templateUrl: './review.component.html',
  styleUrls: ['./review.component.css']
})
export class ReviewComponent implements OnInit {

  title = 'Hello InfiniteScroll v0.2.8, Ng2 Final';

  datas: any[];
  array = [];
  sum = 40;
  throttle = 300;
  scrollDistance = 1;
  errorMessage: string;

  constructor(private _auth: AuthService,
              private _api: ApiService) { 
               this.addItem(0, this.sum)
              }

  ngOnInit() {
      this.getReviewList();
  }
 getReviewList() {
   this._api.getApi("http://localhost:4200/assets/smock/api/reviewList.json")
             .subscribe(data => this.datas = data,
                         error => this.errorMessage = <any>error) 

 }
addItem(startIndex, endIndex) {
    for (let i = 0; i < this.sum; ++i) {
      this.array.push(i);
    }
  }

onScrollDown() {
    console.log('scrolled!!');
    // add another 6 items
    const start = this.sum;
    this.sum += 6;
    this.addItem(start, this.sum);
  }

}

My ReviewComponent.htm:

<div class="page-name">
            <h1><i class="large material-icons">create</i></h1>
            <h1>Thảo luận</h1>
        </div>
        <div class="search-form">
            <input type="text" placeholder="Tìm kiếm...">
            <a href="#!"><i class="material-icons">search</i></a>
        </div>

  <div class="search-results"
         infinite-scroll
         [infiniteScrollDistance]="scrollDistance"
         [infiniteScrollThrottle]="throttle"
         (scrolled)="onScrollDown()">

    <div class="card-review" *ngFor="let i of array">
           <p>{{i}}</p>
        </div>         
</div>

And this is my repo: https://github.com/linhho/X-project_frontend/tree/master/XFront

score 0 · Answer 1 · answered May 03 '17 at 08:05

In ReviewComponent.ts inside onScrollDown() method compare length of output array and scroll limit

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { ApiService } from '../../services/api.service';
import { Response } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Review } from '../../model/review.model';
import { InfiniteScroll } from 'angular2-infinite-scroll';

@Component({
  selector: 'app-home',
  templateUrl: './review.component.html',
  styleUrls: ['./review.component.css']
})
export class ReviewComponent implements OnInit {

  title = 'Hello InfiniteScroll v0.2.8, Ng2 Final';

  datas: any[];
  array = [];
  sum = 40;
  throttle = 300;
  scrollDistance = 1;
  errorMessage: string;

  constructor(private _auth: AuthService,
              private _api: ApiService) { 
               this.addItem(0, this.sum)
              }

  ngOnInit() {
      this.getReviewList();
  }

 getReviewList() {
   this._api.getApi("http://localhost:4200/assets/smock/api/reviewList.json")
             .subscribe(data => this.datas = data,
                         error => this.errorMessage = <any>error) 

 } 

addItem(startIndex, endIndex) {
    for (let i = 0; i < this.sum; ++i) {
      this.array.push(this.datas[i]);
    }
  }

onScrollDown() {
    console.log('scrolled!!');
    // add another 6 items
    const start = this.sum;
    this.sum += 6;
     if(this.sum<this.datas.length){
        this.addItem(start, this.sum);
     }
  }
}

Angular2 Infinite Scroll implementation

1 Answers1