Объединить две наблюдаемые в одну. Типы Observables - это Массив объектов. - PullRequest
Новая
       13

Объединить две наблюдаемые в одну. Типы Observables - это Массив объектов.

0 голосов
/ 08 ноября 2018

Я новичок в библиотеке RxJS.

Я пытаюсь добиться того, чтобы бесконечная прокрутка работала правильно на странице (умный компонент). Наблюдаемое, содержащее данные, которые должны отображаться, изначально представляет собой массив из десяти объектов. Как только пользователь прокручивает страницу вниз, я пытаюсь добавить или объединить наблюдаемое со следующими десятью объектами. Шаблон, который показывает данные, проходит через * ngFor и асинхронный канал. Я могу вставить этот код, если это необходимо.

Я выяснил, когда запускается метод прокрутки и как отслеживать, сколько элементов у меня есть, чтобы я мог выполнить http-запрос для следующих десяти объектов.

Глядя на документы от меня, есть смысл, что оператор concat идеально подходит для меня, но не может заставить его работать. После долгих поисков я наконец нашел эту ветку: Объединение 2 массивов в правильной последовательности с использованием 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];
      })
    );
  }
...