Question

想象一下显示猫列表的UI。在0到3秒之间的随机间隔，发生以下三种情况之一：

猫的状态发生了变化，状态是['睡觉'，'吃'，'呜呜']之一
将猫添加到列表中，状态为“正在睡觉”
从列表中删除了一只猫

对底层模型（猫列表）的这些更改应该实时反映在UI中。

以下是演示https://stackblitz.com/edit/observable-cats?file=app%2Fapp.component.ts

的链接

使用observables是否有理想的解决方案？使用observables的主要挑战之一是修改已经发出（或广播）的列表而不重新发出整个列表。

Answer 1

您可以使用scan来保存数组，然后每个发射都会被一个代表每个动作的对象包裹起来：

enum ActionType {
  Add;
  Edit;
  Delete;
}

interface Action {
  type: ActionType;
  data
}

const action$ = new Subject<Action>();

const cats$ = action$
  .pipe(
    scan((cats, action) => {
      if (action.type === ActionType.Add) {
        cats.push(...);
      } else if (action.type === ActionType.Edit) {
        // edit from `cats`
      } else if (action.type === ActionType.Delete) {
        // remove from `cats`
      }
      return cats;
    }, []),
  )

action$.next({ type: ActionType.Add, data: { ... } });

你也可以通过将数组传递给scan的第二个参数而不是[]来初始化猫的列表（或者你可以做另一个动作）。

使用observable修改已经发出的列表（或值）

1 个答案: