小编Jam*_*lle的帖子

角度4与ngx无限滚动

我想在我的Angular 4项目中添加一个带有ngx-infinite-scroll的无限滚动.

阵列数据有大约800个来自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);
      }
});
Run Code Online (Sandbox Code Playgroud)

.

这是组件代码.
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> …
Run Code Online (Sandbox Code Playgroud)

javascript infinite-scroll angularjs nginfinitescroll

2
推荐指数
1
解决办法
1万
查看次数