Question

我是RxJS库的新手。

我要实现的目标是使无限滚动在页面（智能组件）上正常工作。包含应该显示的数据的Observable最初是十个对象的数组。当用户滚动到页面底部时，我将尝试在此位置将可观察对象与下一个十个对象附加或连接在一起。显示数据的模板正在通过* ngFor和异步管道进行循环。如果需要，我也可以粘贴该代码。

我已经弄清楚了何时触发滚动方法以及如何跟踪我有多少个元素，因此我可以对接下来的10个对象进行http请求。

看我的文档很有意义，concat运算符对我来说很完美，但无法使其正常工作。经过大量的挖掘，我终于找到了这个线程：Combining 2 arrays in correct sequence using Rx.js

我的最后一个方法来自我链接的线程。它实际上确实使可观察的内容累积了十个元素，但是问题是每次发生时它都会在顶部滚动，这是不希望的。是否有更方便的方法来实现这一目标？以及如何防止页面在顶部滚动？

这是服务类中的HTTP方法：

//Returns all articles corresponding to given categorytitle as input parameter

public getCategoryArticles(httpParams: HttpParameters): Observable<Article[]>{

  const headers = new Headers().set('Content-Type', 'application/json');

  const params = this.createHttpParams(httpParams);

  return this.HTTP_GET({headers: headers, params: params}).pipe(
    map((data: any) => {
      return data.stream.current.map((categoryData: any) => {
        return {
          id: categoryData.siObj.id,
          headline1: categoryData.siObj.headline1,
          headline2: categoryData.siObj.headline2,
          headline3: categoryData.siObj.headline3,
          lead: categoryData.siObj.lead,
          byline: categoryData.siObj.byline,
          body: categoryData.siObj.body,
          media: categoryData.siObj.media
        };
      });
    }),
    catchError((error) => {
      return throwError(`A problem has occured. More info: ${error}`);
    })
  );
}

这是页面类（智能组件）中的一些方法。初始声明：

ngOnInit(){
    this.from = 0;
    this.categoryKey = this.route.snapshot.paramMap.get('key');
    this.categoryCount = Number(this.route.snapshot.paramMap.get('count'));
    this.category$ = this.getCategoryArticles(this.categoryKey, this.from);
}

页面类的HTTP请求。

getCategoryArticles(categoryAsString: string, from: number): Observable<Article[]> {
    const httParams: HttpParameters = {
      aType: "stream", 
      action: "getStream",
      categoriesAsString: categoryAsString, 
      from: String(from),
      size: "10"
    };
    this.from = this.from + 10;
    return this.networkService.getCategoryArticles(httParams); 
}

无限滚动方法。

 //Triggered when scrolling at bottom of page
  loadData(){ 
    this.category$ = this.category$.pipe(
      combineLatest(this.getCategoryArticles(this.categoryKey, this.from))
      ,map(([current, latest]) => {
        return [...current, ...latest];
      })
    );
  }

将两个Observable合并为一个。 Observables类型是对象数组

0 个答案: