Оператор RxJS zip () не работает должным образом.Это всегда завершается, не вызывая никакого значения - PullRequest
Новая
       21

Оператор RxJS zip () не работает должным образом.Это всегда завершается, не вызывая никакого значения

0 голосов
/ 05 марта 2019

Сценарий: при наличии наблюдаемой с большим количеством элементов, например 450+, я хочу добавить эти элементы к другой наблюдаемой партиями по 100 элементов.

рабочий пример можно найти здесь: https://stackblitz.com/edit/rxjs-au9pt7?file=index.ts, которые @martin предоставил мне как часть ответа на этот вопрос: Возьмите N значений из Observable до его полного завершения на основе события.Ленивая загрузка списка множественного выбора

Стекблиц работает как шарм, но я изо всех сил пытаюсь реализовать это в Angular.Observable (результат оператора zip) завершается без запуска какого-либо единственного значения, но, как вы можете видеть в рабочем примере, он работает отлично.Я, должно быть, что-то упускаю, но я не уверен, что именно.

component.ts 

import { Component, AfterViewInit } from '@angular/core';
import { zip, Observable, fromEvent, range } from 'rxjs';
import { map, bufferCount, startWith, scan } from 'rxjs/operators';
import { MultiSelectService, ProductCategory } from './multiselect.service';

@Component({
  selector: 'multiselect',
  templateUrl: './multiselect.component.html',
  styleUrls: ['./multiselect.component.scss']
})
export class MultiselectComponent implements AfterViewInit {

  SLICE_SIZE = 100;
  categories$: Observable<Array<ProductCategory>>;

  constructor(private data: MultiSelectService) {
    this.categories$ = data.categories$;
  }

  ngAfterViewInit() {
    const loadMore$ = fromEvent(document.getElementsByTagName('button')[0], 'click');
    const data$ = range(450);

    zip(
      data$.pipe(bufferCount(this.SLICE_SIZE)),
      loadMore$.pipe(startWith(0)),
    ).pipe(
      map(results => results[0]),
      scan((acc, chunk) => [...acc, ...chunk], []),
    ).subscribe({
      next: v => console.log(v),
      complete: () => console.log('complete'),
    });
  }

}

template.html 

<button>load more</button>

Большое спасибо заранее, любая помощь очень ценится.

Ответы [ 2 ]

0 голосов
/ 05 марта 2019

По какой-то странной причине проблема была вызвана RxJS версии 6.3.3.Обновление до RxJS 6.4.0 решило проблему.

0 голосов
/ 05 марта 2019

Я думаю, что вы неправильно понимаете zip, zip будет чередовать результаты двух наблюдаемых. 

const { from, zip } = rxjs;

const nums$ = from([1, 2, 3, 4]);
const strings$ = from(['a', 'b', 'c', 'd']);

zip(nums$, strings$).subscribe(([num, str]) => { console.log(`${num} - ${str}`); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.4.0/rxjs.umd.min.js"></script>
...