无限滚动:OnScroll重置变量的值

时间:2018-09-24 08:27:05

标签: angular typescript infinite-scroll

我忙于无限滚动,发现了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();
      }
    }

0 个答案:

没有答案