javascript Angular 4 与 ngx 无限滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47587231/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular 4 with ngx infinite scroll
提问by Jamille
I am trying to add an infinite scroll with ngx-infinite-scrollin my Angular 4 project.
我正在尝试在我的 Angular 4 项目中添加一个带有ngx-infinite-scroll 的无限滚动。
The array data has about 800posts which are from API.
数组数据有大约800个来自 API 的帖子。
Initially, I want to display 20 posts and every single time the page is scrolled, it will display 20 more posts.
最初，我想显示 20 个帖子，每次滚动页面时，它会再显示 20 个帖子。
Currently, I can see the console log message (scrolled!)whenever I scroll down.
目前，每当我向下滚动时，我都可以看到控制台日志消息（滚动！）。
But I can't figure out how to append 20 posts into the table when it's scrolled.
但是我不知道如何在滚动时将 20 个帖子附加到表格中。
This is the codes that I am trying.
这是我正在尝试的代码。
onScrollDownfunction
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);
}
});
.
.
This is the component codes.
posts.component.html
这是组件代码。
帖子.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
post.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,
}
回答by NiravAdatiya
first, save your original array like this
首先，像这样保存原始数组
this.dataService.getPosts().subscribe((response)=>{
this.originalPosts = response;
this.posts = response.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]);
}
}
}
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.
只需将它推送到您不需要直接将其附加到表的同一个数组上，angular 将自行管理，使用 angular 时太容易了。
