Angular：绑定并与数组保持同步

Posted 2023-03-27

【中文标题】Angular：绑定并与数组保持同步

【英文标题】：Angular : binding and staying in sync with an array

【发布时间】：2021-02-08 02:12:13

【问题描述】：

我有一个包含项目列表的服务。我想要一个角度组件来显示项目并在项目更改时保持同步。

列表很大，我希望根据更改事件进行更新。所以我认为我需要像 ObservableArray 类这样的东西。

但是我在 Angular 或 rxjs 中找不到任何合适的东西。 Knockout 有一个 ObservableArray，但我真的不想只为一节课引入它。

是否有我错过的 ObservableArray 样式类，或者我看错了（因为我对 Angular 还很陌生，所以可能更多）。

谢谢

【问题讨论】：

您能否更详细地描述您的用例？你现在的问题太宽泛了

最简单的方法是只在 BehaviorSubject 中添加一个数组，并在更新后的数组发生更改时将其推送，但这可能无法满足您将来的所有状态管理需求。我认为您应该总体上研究带有角度的状态管理。即使您不使用ngrx - Angular NgRx Entity - Complete Practical Guide，阅读实体存储也很有用。然后你也可以用纯 rxjs 建立一个商店 - Before NgRx: Superpowers with RxJS + Facades。

【参考方案1】：

考虑使用combineLatest。假设您有一个事件removeItem$ 发出一个Observable 和一个函数getItems() 从服务中获取项目。你可以像下面这样使用combineLatest

  removeItemSubject$ = new BehaviorSubject(null)
  removeItemEvent$ = this.removeItemSubject$.asObservable()
  data$ = this.myService.getItems()
  synchedData$ = combineLatest([data$, this.removeItemEvent$]).pipe(
    map(([data]) => data)
  )

现在，您可以简单地调用removeItemSubject$.next(null) 来重新评估combineLatest Observable，这将更新来自服务的数据。

您也可以考虑使用forkJoin 运算符