RxJS zip()运算符不能按预期工作。它总是在不触发任何值的情况下完成
RxJS zip()运算符不能按预期工作。它总是在不触发任何值的情况下完成
提问于 2019-03-05 06:25:08
场景:当一个观察值包含许多元素时，例如450+，我想将这些元素分批添加到另一个包含100个元素的观察值中。
你可以在这里找到一个有效的例子：@martin提供给我的https://stackblitz.com/edit/rxjs-au9pt7?file=index.ts，作为这个问题的答案的一部分：Take N values from Observable until its complete based on an event. Lazy loading a multi select list
stackblitz就像一个护身符，但我正在努力在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
Stack Overflow用户
回答已采纳
发布于 2019-03-05 06:35:19
我想你误解了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>
Stack Overflow用户
发布于 2019-03-05 07:33:09
出于某种奇怪的原因，RxJS版本6.3.3导致了这个问题。升级到RxJS 6.4.0修复了此问题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54992526
复制相关文章
相似问题