更新后比较数组中的新旧订阅值

如何解决更新后比较数组中的新旧订阅值

我有以下可观察到的在pages上得到workspace的情况：

page$ = this.pageService.getPages(this.workspaceId) // .subscribe() to get data

在添加新页面时会定期更新。

我想在添加新页面（或页面流）之前和之后保存页面数组，然后能够进行比较。

例如，在init上，如果有三页，则arrayOld将是三页中的一个。然后，如果添加了一个新页面，那么将有一个由四个页面组成的新数组arrayNew。

如果随后删除了一个页面，则arrayOld将变为arrayNew（长度为4），而arrayNew将成为新的页面集（长度为3）。

我还没有找到一种简单的方法来使用subscribe()来完成当前页面流。

这里的任何帮助都将是惊人的。谢谢！

解决方法

也许是这样

import { Observable,of } from 'rxjs';

const observable = of([1],[1,2],[1],3],3,4],4,5]);

let arrayOld = [];
let arrayNew = [];

observable.subscribe(a => {
  arrayOld = JSON.parse(JSON.stringify(arrayNew));
  arrayNew = JSON.parse(JSON.stringify(a));
  
  console.log("---------------");
  console.log("old:",arrayOld);
  console.log("new:",arrayNew);
});

当页面（删除和添加）用数字编码时：

[1]: initially there is only page id=1
[1,2] added page id=2
[1] deleted page id=2
[1,3] added page id=3,4] added page id=4
[1,5] added page id=5

JSON.parse(JSON.stringify(arrayNew))：用于深度复制数组

这是一次堆叠闪电战： https://tzb2jv.stackblitz.io

,

使用pairWise运算符。这是一个示例：

const pages$: Observable<string[]> = of(
  ['Page1','Page2','Page3'],['Page1','Page3','Page4'],'Page4','Page5'],);

pages$.pipe(
  startWith([]),pairwise(),).subscribe(
  ([arr1,arr2]) => console.log(arr1,'changed to',arr2),);

输出：

[]
changed to
["Page1","Page2","Page3"]

["Page1","Page3"]
changed to
["Page1","Page3","Page4"]

["Page1","Page4"]
changed to
["Page1","Page4","Page5"]

,

scan的作用类似于reduce函数，您可以拥有一个累加器，该累加器返回前一个和当前的累加器。

linux : tail -f /path/to/logfile.log
windows : enter PowerShell -> Get-Content /path/to/logfile.log -Wait -Tail 1000

const { of } = rxjs;
const { scan } = rxjs.operators;

of([1,[3,4]).pipe(
  scan((acc,current) => {
    acc.previous = acc.current;
    acc.current = current;
    return acc;
  },{})
).subscribe(({ current,previous }) => {
  const added = previous ? current.filter(i => !previous.includes(i)) : current;
  const deleted = previous ? previous.filter(i => !current.includes(i)) : [];
  console.log('Added: ',added);
  console.log('Deleted: ',deleted);
});