Javascript 如何从动态创建的输入更新总和？

我有多个动态创建的输入（可以添加或删除输入）。和一个显示输入总和的文本字段。我如何动态附加observable，我的文本如何订阅所有这些内容

因为我不知道如何创建观测值并将其附加到字段，或者如何使用它们的id访问它们。我没有太多的代码发布！有什么意见吗

函数具有循环并返回obeservable列表

// Function that adds to an array of MappableObservables
const addToState = (update: MappableObservable<string>) => (state: MappableObservable<string>[]): MappableObservable<string>[] => 
  [...state, update];

// Function that deletes all items with given key from an array of MappableObservables
const deleteFromState = (key: number) => (state: MappableObservable<string>[]): MappableObservable<string>[] =>
  state.filter(item => item.key !== key);

// Function that executes the above add or delete function inside a scan
const scanFn = (state: MappableObservable<string>[], fn: (state: MappableObservable<string>[]) => MappableObservable<string>[]) =>
  fn(state)

---

如果要随时间向数组添加/删除观察值，这意味着您需要一个状态（由于添加/删除）。如果你想坚持使用rxjs，我知道唯一没有副作用的方法就是使用操作符。以下代码显示了一个实现：

接口

interface MappableObservable <T>{
  key: number,
  observable: Observable<T>
}

仅供参考：只有当你重播它们或者像我在这个例子中所做的那样使用（…）时，才能直接观察到。如果你有未重放或即时观测，它们只会在新完成时发出

---

如果要随时间向数组添加/删除可观察对象，则运行

，这意味着您需要一个状态（由于添加/删除）。如果你想坚持使用rxjs，我知道唯一没有副作用的方法就是使用操作符。以下代码显示了一个实现：

接口

interface MappableObservable <T>{
  key: number,
  observable: Observable<T>
}

仅供参考：只有当你重播它们或者像我在这个例子中所做的那样使用（…）时，才能直接观察到。如果你有未重放或即时观测，它们只会在新完成时发出

---

运行

如何动态创建输入？你能举个例子吗。随着时间的推移，这些是多个可观察到的还是只有一个可观察到的阵列在变化？我只是更新了问题以了解更多细节。请看一下提供的答案是否适合您？或者你有什么问题吗？写详细的答案需要付出相当大的努力，如果不了解，我希望至少有反馈。您的输入是如何动态创建的？你能举个例子吗。随着时间的推移，这些是多个可观察到的还是只有一个可观察到的阵列在变化？我只是更新了问题以了解更多细节。请看一下提供的答案是否适合您？或者你有什么问题吗？写详细的答案需要付出相当大的努力，如果理解的话，我希望至少能得到反馈

const DEFAULT_MAPPABLE_OBSERVABLE_STATE: MappableObservable<string>[] = [];
const add$: Subject<MappableObservable<string>> = new Subject();
const delete$: Subject<number> = new Subject();

const source$: Observable<string[]> = merge(
  add$.pipe(map(addToState)),
  delete$.pipe(map(deleteFromState))
).pipe(
  scan(scanFn, DEFAULT_MAPPABLE_OBSERVABLE_STATE),
  map(state => state.map(mappableObservable => mappableObservable.observable)),
  switchMap(observables => combineLatest(observables))
)

add$.next({key: 1, observable: of('uno')}) // Output: 'uno'
add$.next({key: 2, observable: of('duo')}) // Output: 'uno', 'duo'
add$.next({key: 3, observable: of('tri')}) // Output: 'uno', 'duo', 'tri'
add$.next({key: 2, observable: of('duo-duo')}) // Output: 'uno', 'duo', 'tri' 'duo-duo'
delete$.next(2); // Output: 'uno', 'tri'