角度4与ngx无限滚动 [英] Angular 4 with ngx infinite scroll

问题描述

我正在尝试使用 ngx-infinite-scroll 添加无限滚动我的Angular 4项目。

I am trying to add an infinite scroll with ngx-infinite-scroll in my Angular 4 project.

数组数据包含来自API的 800 帖子。

The array data has about 800 posts which are from API.

最初，我想显示20个帖子，每次滚动页面时，都会显示20个帖子。

Initially, I want to display 20 posts and every single time the page is scrolled, it will display 20 more posts.

目前，每当我向下滚动时，我都会看到控制台日志消息（滚动！）。

Currently, I can see the console log message (scrolled!) whenever I scroll down.

但是当我滚动它时，我无法弄清楚如何将20个帖子附加到表格中。

But I can't figure out how to append 20 posts into the table when it's scrolled.

这个是我正在尝试的代码。

This is the codes that I am trying.

onScrollDown 功能

onScrollDown(){        
  this.dataService.getPosts().subscribe((posts)=>{
      for (let post of posts){
       let data = '<tr><td>'+ post.title +'</td><td>'+ post.geo +'</td><td>'+ post.Telephone +'</td><td>'+ post.category +'</td><td>Detail</td></tr>';
       $('table.feed tbody').append(data);
      }
});

---

。

---

.

这是组件代码。

posts.component.html

    <div *ngIf="posts?.length > 0;else noPosts" class="search-results" infinite-scroll [infiniteScrollDistance]="2" [infiniteScrollUpDistance]="2" [infiniteScrollThrottle]="50" (scrolled)="onScrollDown()" [scrollWindow]="false">
        <table class="responsive-table feed striped">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>State/City</th>
                    <th>Phone</th>
                    <th>Category</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let post of posts | filter:term">
                    <td>{{post.title}}</td>
                    <td>{{post.geo}}</td>
                    <td>{{post.Telephone}}</td>
                    <td>{{post.category}}</td>
                    <td>Detail</td>
                </tr>
            </tbody>
        </table>
    </div>

---

posts.component.ts

    import { Component, OnInit } from '@angular/core';
    import { DataService } from '../../services/data.service';
    import { FilterPipe } from '../../filter.pipe';
    declare var jquery:any;
    declare var $ :any;

    @Component({
      selector: 'feed',
      templateUrl: './feed.component.html',
      styleUrls: ['./feed.component.css']
    })

    export class FeedComponent implements OnInit {

    term : '';
    posts: Post[];

      constructor(private dataService: DataService) { }

      ngOnInit() {
          this.dataService.getPosts().subscribe((posts)=>{
              this.posts = posts.slice(0,10);
          });
      }

    onScrollDown(){     
         console.log("scrolled!");   
    }

    interface Post{
        id:number, 
        title:string,
        contact:string,
        Address:string,
        Telephone:number,
        Email:string, 
        Website:string, 
        Establishment:string,
        sector:string,
        category:string,
    }

推荐答案

首先，像这样保存原始数组

first, save your original array like this

 this.dataService.getPosts().subscribe((response)=>{                  
               this.originalPosts = response;
               this.posts = posts.slice(0,20);
          });

 onScrollDown(){
   if(this.posts.length < this.originalPosts.length){  
     let len = this.posts.length;

     for(i = len; i <= len+20; i++){
       this.posts.push(this.originalPosts[i]);
     }
   }
 }

只需按下它即可数组你不需要直接将它附加到表中，angular会自行管理，使用angular时它太容易了。

just push it on the same array you don't need to append it to the table directly, angular will manage itself, its too easy when using angular.

这篇关于角度4与ngx无限滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！