Question

我发出了一条指令和服务来对我的表列进行如下排序：

我的排序服务：

onSort({ column, direction }: SortEvent, observable: Observable<any[]>, headers: QueryList<SortableHeaderDirective>) {
    // resetting other headers
    headers.forEach(header => {
      if (header.sortable !== column) {
        header.direction = '';
      }
    });

    if (direction === '') {
      //Do nothing
    } else {
      observable
        .pipe(
          tap(results => {
            return results.sort((a, b) => (direction === 'asc' ?
              compareString(a[column], b[column]) :
              -compareString(a[column], b[column])))
          })
        ).subscribe();
    }
  }

问题是，在我最近更新我的所有软件包（角度9，最新的rxjs等）之前，它一直都可以正常工作-当我通过它调试时它仍然可以工作，但是它不会更新模板上的可观察对象（调用位置此服务功能）。我的linter说过，.subscribe（）已过时，但我一直无法弄清楚如何修改现有函数以利用最新的可观察到的回调。任何帮助将不胜感激！

Answer 1

rxjs map operator是转换整个对象数组的更好选择。

看看例子

function compareString(prev, next) {
  return prev > next ? 1 : -1
}

function resetHeaders(column, headers) {
  return headers.map(header => ({
    ...header,
    direction: header.sortable !== column ? '' : header.direction
  }));
}

const sort = (column, direction) => {

  let compareFunction = (prev, next) => -compareString(prev[column], next[column]);
  
  if (direction === 'asc') {
    compareFunction = (prev, next) => compareString(prev[column], next[column]);
  }

  return (results) => {

    const sorted = [...results];
    sorted.sort(compareFunction)
    return sorted;

  }
}

function onSort({
  column,
  direction
}, observable, headers) {

  headers = resetHeaders(column, headers);

  if (direction === '') {
    return;
  }

  const sorter = sort(column, direction);

  observable
    .pipe(
      rxjs.operators.map(sorter)
    ).subscribe(data => {
      console.log(data)
    });
}

const headers = [{
    direction: '',
    sortable: ''
  },
  {
    direction: '',
    sortable: ''
  }
]

const observable = rxjs.of([{
    name: 'A',
    value: 1
  },
  {
    name: 'B',
    value: 2
  }
])

const sortData = {
  column: 'name',
  direction: 'asc'
}

onSort(sortData, observable, headers)

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.5.5/rxjs.umd.js"></script>

修改可观察对象的流

1 个答案: