如何切换此数组/列表中2项的“order”属性?

时间:2018-01-24 12:09:58

标签: rxjs

class item {
  name: string;
  order: number;
}
let onUp = new Rx.Subject<item>();
let list = new Rx.BehaviorSubject<item>([
  { name: "7", order: 70 },
  { name: "2", order: 20 },
  { name: "5", order: 50 },
  { name: "3", order: 30 },
  { name: "4", order: 40 },
  { name: "6", order: 60 },
  { name: "1", order: 10 }
]);
list.subscribe(console.log);
onUp.subscribe(anItem => {
  let numberList: item[];
  list
    .take(1)
    .map(x => x.sort((a, b) => a.order - b.order))
    .subscribe(ddList => (numberList = ddList));
  let index = numberList.indexOf(numberList.find(num => num.order == anItem));
  let ddvalue = numberList[index];
  let preddvalue = numberList[index - 1];

  let preddvalueOrder = preddvalue.order;
  preddvalue.order = ddvalue.order;
  ddvalue.order = preddvalue.order;

  list.next(numberList);
});

onUp.next(30);

有什么反应方式可以将“订单”的值与列表中的另一个对象进行交换?

我有一堆项目,我应该可以重新排序。

项目的顺序基于项目列表中项目对象的订单属性。 我通过切换两个项目的order属性来重新排序项目。 在示例代码中,onUp Subject发出一个orderNumber,它应该与上面的项目一起切换(按order属性排序)

示例代码有效,它只是因为第二个订阅是异步的,它可能是不好的做法。 另一种方法是在外部订阅中进行订阅内部的重新排序,但这也是不好的做法(不确定为什么除了它是一个凌乱的嵌套这一事实)。

我总是看到flatMap,但如果我理解正确,第二个订阅只使用第一个订阅中的数据来获取数据。 在这种情况下,我需要来自第一和第二主题的数据来获得要切换的两个项目以及要推送到列表主题的新列表。

2 个答案:

答案 0 :(得分:0)

啊......保持2个名单对你好吗?一个是未分类的,另一个总是听取未排序的更改并对其进行排序。

const list = new Rx.BehaviorSubject([
  { name: "7", order: 70 },
  { name: "2", order: 20 },
  { name: "5", order: 50 },
  { name: "3", order: 30 },
  { name: "4", order: 40 },
  { name: "6", order: 60 },
  { name: "1", order: 10 }
]);
const sortedList = new Rx.BehaviorSubject([]);
const onUp = new Rx.BehaviorSubject(0);

list
  .map(x => x.sort((a, b) => a.order - b.order))
  .subscribe(x => sortedList.next(x));

sortedList.subscribe(console.log);

onUp.subscribe(x => {
  const idx  = sortedList.getValue()
    .findIndex(itm => itm.order === x);
  
  if (idx < 1) return;
  
  const list = sortedList.getValue();
  
  const prev = list[idx - 1].order;
  const curr = list[idx].order;
  
  list[idx].order = prev;
  list[idx - 1].order = curr;
  
  sortedList.next(list);
});

onUp.next(30);
onUp.next(70);
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.6/Rx.min.js"></script>

答案 1 :(得分:0)

<{1}} getValue()的{​​{1}}也是不好的做法(Ben Lesh在我的来源中也这样说)。在BehaviorSubjectwithLatestFrom上读取以组合两个可观察对象。

combineLatest

将其粘贴到此处: https://emeraldwalk.github.io/rxjs-playground/#

来源: https://stackoverflow.com/a/45227115