如何确定 Observable.merge 中哪些 observable 发生了变化？

Question

您可以在下面看到我为可读性和清晰度而简化的代码：

connect(): Observable<Customer[]> {
   const displayDataChanges = [
     this._customerDatabase.dataChange,
     this._filterChange,
     this._sort.mdSortChange,
     this._paginator.page
   ];
   return Observable.merge(...displayDataChanges).map(() => {
     let data = this._customerDatabase.data.slice();
     data = this.getFilteredData(data);
     data = this.getSortedData(data);
     const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
     return data.splice(startIndex, this._paginator.pageSize);
   });
}

此方法将返回一个可观察的客户数组。

下面的部分定义了一个 Observables 数组：

const displayDataChanges = [
      this._customerDatabase.dataChange,
      this._filterChange,
      this._sort.mdSortChange,
      this._paginator.page
];

每次其中一个发出数据时，我都希望我的客户数组发生变化。 （当我加载数据时，当我的过滤器发生变化时，当我选择另一种排序机制时以及当我更改页面时）

然后我将所有这些合并在一起，以便我可以“组装”我必须返回的数据。如您所见，它的性能不是很好，因为它无法区分实际的 observable 发出的数据...

我如何做到这一点并确定哪个 observable 已更改？ （下面的伪代码）

return Observable.merge(...displayDataChanges).map(() => {

 **[ALWAYS]**
 let data = this._customerDatabase.data.slice();

 **[IF MY SORTING HAS CHANGED]**
 data = this.getSortedData(data); /* After which i will change the dataSet */
 **[IF MY FILTER HAS CHANGED]**
 data = this.getFilteredData(data);

 **[ALWAYS]**
 const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
 return data.splice(startIndex, this._paginator.pageSize);
});

Answer 1

您可以做到这一点的一种方法是让您的 Observables 发出一个具有类型的对象。例如：

connect(): Observable<Customer[]> {

   const typifier = (type) => {
       return (val) => {
           return { type: type, value: val };
       }
   };

   const displayDataChanges = [
       this._customerDatabase.dataChange,
       this._filterChange.pipe(map(typifier('filterChange'))),
       this._sort.mdSortChange.pipe(map(typifier('sortChange'))),
       this._paginator.page
   ];

   return merge(...displayDataChanges).pipe(map(obj => {

       let data = this._customerDatabase.data.slice();

       if (obj.type === 'filterChange')
       {
           data = this.getFilteredData(data);
       }

       if (obj.type === 'sortChange')
       {
           data = this.getSortedData(data);
       }

       const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
       return data.splice(startIndex, this._paginator.pageSize);
   }));
}

这是一个指向 code snippet 的链接，您可以使用它使用 click 和 interval observables。

Answer 2

您可以使用combineLatest 代替merge。这样，您可以为每个合并的 observables 获取一个发出的值。您所要做的就是保留 mdSortChange 和 _filterChange 的最后一个值的引用，以检查它们是否已更改。

CombineLatest documentation

connect(): Observable<Customer[]> {
  const displayDataChanges = [
    this._customerDatabase.dataChange,
    this._filterChange,
    this._sort.mdSortChange,
    this._paginator.page
  ];

  let lastFilter = null;
  let lastSort= null;

  return Observable
    .combineLatest(...displayDataChanges)
    .map(([newData, newFilter, newSort, newPage]) => {
      let data = this._customerDatabase.data.slice();

      if (newFilter !== lastFilter) {
        data = this.getFilteredData(data);
        lastFilter = newFilter ;
      }

      if (newSort !== lastSort) {
        data = this.getSortedData(data);
        lastSort = newSort;
      }

      const startIndex = this._paginator.pageIndex * this._paginator.pageSize;
      return data.splice(startIndex, this._paginator.pageSize);
 });
}