我想在我的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)