Angular 4 with ngx無限スクロール

Question

Angular 4プロジェクトでngx-infinite-scrollという無限のスクロールを追加しようとしています。

配列データには、API由来の約というポストがあります。

最初は20個の投稿を表示したいと思いますが、ページをスクロールするたびに20個の投稿が表示されます。

現在、私がスクロールダウンすると、コンソールログメッセージ（スクロール！）が表示されます。

しかし、スクロールするときに20個の投稿をテーブルに追加する方法がわかりません。

これは私が試みているコードです。

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, 
    } 

Answer 1

まず、ちょうどこの

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

のようなあなたの元の配列を保存それをテーブルに直接追加する必要はない同じ配列にプッシュします。角度はそれ自身を管理します。角度を使用すると非常に簡単です。