我正在尝试在Angular 4项目中添加ngx-infinite-scroll的无限滚动。
数组数据包含来自API的 800 帖子。
最初,我想显示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,
}
答案 0 :(得分:5)
首先,像这样保存原始数组
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时它太容易了。