Angular2无限滚动的实现

Question

我在我的项目中使用了angular2-infinite-scroll。我的想法是第一次页面将加载6个项目，然后每次我滚动到页面末尾，它应该渲染6个项目。

尽管我的JSON文件中只有15个项目，但当我滚动时，它会持续加载，而且不会停止。

这是我的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);
  }

}

我的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>       

这是我的回购：https://github.com/linhho/X-project_frontend/tree/master/XFront

Answer 1

在ReviewComponent.ts inside onScrollDown()方法中，比较输出数组的长度和滚动限制

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