我忙于无限滚动,发现了ngx-infinite-scroll。它像我想要的那样工作。我有1000个帖子,带有标签,并且首先显示前50个帖子。当我向下滚动时,将显示接下来的50个帖子。完美!
但是,就像我说的,帖子中有标签。我有一个标签列表,当我单击标签时,会触发组件中显示帖子的函数。它添加标签,并且仅显示带有该标签的帖子。也;完美。
但是...当我向下滚动到第二页时,所选标签将被删除;包含数组ID的数组为空,而在OnScroll函数之前被填充。我不知道为什么。
这就是我现在拥有的:
import { Component, OnInit } from '@angular/core';
import { PostsService } from '@app/Services/posts.service';
import { PostSharingService } from '@app/Behaviors/PostSharingBehaviour';
import * as _ from 'lodash'
import { Post } from '@app/models/post';
@Component({
selector: 'app-postings',
templateUrl: './postings.component.html',
styleUrls: ['./postings.component.css']
})
export class PostingsComponent implements OnInit {
public reset: boolean = false;
public postings: Post[];
page: number;
tags: string[];
constructor(private postingService: PostsService, private postSharingService: PostSharingService) { }
ngOnInit() {
this.tags = [];
this.postSharingService.posts.subscribe( value => {
this.postings = value;
});
this.search();
}
public onScroll () {
this.page = this.page + 1;
this.search();
}
public search() {
console.log(this.tags);
this.postingService.getAllPosts(this.tags.join(","), 50, this.page).subscribe(response=>{
if(this.reset)
this.postSharingService.posts.next(response);
else
this.postSharingService.posts.next(
_.concat(this.postSharingService.posts.getValue(), response));
});
}
public addTag(tagId:string){
if(!this.tags)
this.tags = [];
if(tagId == "0")
this.tags = [];
else
this.tags.push(tagId);
this.reset = true;
this.search();
}
}