如何监控RxJS可观察性中的集合/数组变化

Question

在Angular中，我有一个使用(click)="onSelectItem($event, item):复选框输入的可选项目列表

@Input() public selectedItems$: EventEmitter<Set<any>>;
private selectedItems = new Set<any>();
public onSelectItem(event: any, item: any) {
if (event.target.checked){
this.selectedItems.add(item);
} else {
this.selectedItems.delete(item);
}
this.selectedItems$.emit(new Set(this.selectedItems));
}

使用selectedItems$从另一个组件观察这些选定项目，并将其显示在图表中。但是，图表(来自angular-highcharts(只有一个API来添加新系列和使用索引删除系列。

如何观察selectedItems$来检测添加的项目和删除的项目？此外，我需要跟踪项目的索引，以便在正确的索引处删除它们。

Answer 1

我们可以利用pairwise()来构建索引的Map(seriesMap(，如下所示：

@Input() public selectedItems$ = new EventEmitter<Set<any>>();
private seriesMap = new Map<any, number>();
private seriesLength = 0;
this.selectedEvaluations$.pipe(
startWith(new Set()), // used so that pairwise emits the first value immediately
pairwise(), // emit previous and current value
map(([pv, cv]) => {
let removed = new Set<any>([...pv].filter(x => !cv.has(x)));
let added = new Set<any>([...cv].filter(x => !pv.has(x)));
return [removed, added]
}),
tap(([removed, added]) => {
for (const item of removed) {
const idx = this.seriesMap.get(item);
this.seriesMap.delete(item);
for (const [key, value] of this.seriesMap) {
if (value > idx) {
this.seriesMap.set(key, value-1);
}
}
// this.chart.removeSeries(idx);
this.seriesLength--;
}
for (const item of added) {
// this.chart.addSeries(...);
this.seriesMap.set(evaluation, this.seriesLength++);
}
})
)