Angular2 Infinite Scroll-Implementierung

Question

Ich benutze angular2-infinite-scroll für mein Projekt. Meine Idee ist das erste Mal Seite lädt 6 Elemente, und jedes Mal, wenn ich bis zum Ende der Seite blättern, sollte es 6 Elemente mehr rendern.

Aber wenn ich scroll, lädt es kontinuierlich und nie aufhören, obwohl ich nur 15 Elemente in meiner JSON-Datei haben. Hier

ist mein 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); 
    } 

} 

Mein 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>  

Und das ist mein Repo: https://github.com/linhho/X-project_frontend/tree/master/XFront

Answer 1

In ReviewComponent.ts innerhalb onScrollDown() Methode vergleichen Länge der Ausgangsanordnung und Scrollgrenze

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); 
    } 
    } 
}