Question

我的要求是显示带有CRUD操作的Employee列表。所以我创建了一个HTML，用employee$管道订阅async observable来显示所有员工的详细信息。

现在，对于创建员工选项，我需要向员工$ observable＆amp;添加新行。对于删除员工，我需要从中删除一个值。

问题就出现了。我需要一个observable，我可以在需要时添加/删除/修改值。有人建议使用BehaviourSubject代替Observable，但我只能添加内容。我无法从中删除任何内容（对于删除我需要从中删除一个）。

另一种选择是只订阅组件中的observable并直接使用数组，而不是使用我不想做的async管道。

有没有办法在Observable Array中进行CRUD操作？

Answer 1

我认为scan是一个不错的选择：

type Command = {op: 'add', employee: Employee}|{op: 'remove', id: number}|{op: 'update', employee: Employee};

const commandSubject = new Subject<Command>();

const employees$ = commandSubject.scan((acc: Employee[], curr: Command) => {
  switch(curr.op) {
    case 'add':
      return [...acc, curr.employee];
    case 'remove':
      const newList = [...acc];
      newList.splice(acc.findIndex(employee => employee.id = curr.employeeId), 1);
      return newList;
    case 'update':
      const newList2 = [...acc];
      newList2.splice(acc.findIndex(employee => employee.id = curr.employee.id), 1, curr.employee);
      return newList2;
  }
}, []);

另请注意，ngrx-store是管理应用程序状态的绝佳工具。

来自可观察的推/弹项目

1 个答案: