如何使用 state 管理订阅 Angular 中的异步数组？

Question

我在我的 Angular 应用程序中有一个动态的项目列表，一个看起来大约像这样的行表：

 Product name [edit button]   Date changed  [delete]
 Product name [edit button]   Date changed  [delete]
 ....

我正在使用 Elf 来维护列表（可以使用 rxAngular 来解决这个问题，但它没有内置对项目列表的支持，尤其是 UI 项目列表。不想 go 像 NGXS/NGRX 这样更复杂的东西）。 但是，我确实使用 rxAngular 仅用于副作用，这对我的问题并不重要。 当你点击[edit button] ——你进入“编辑模式”—— Product name变成一个输入框。 编辑后， Date changed更改相应更改。

(1) 在您尝试添加 animation 之前，您看不到 State 管理的问题。 项目列表是可观察的，从 Elf 商店（可能是任何其他商店）获得。 一旦您尝试更改任何内容，比如进入“编辑模式”，商店就会根据著名的不变性原则创建一个新的 state。 这意味着列表 observable 会触发一个新值，并且由于列表已更改，因此 Angular 必须重新绘制所有内容。 启用 animation 后，您会看到行在重新排列到生成的 state 之前跳舞（删除所有行，然后添加新副本）。 如果仅更改了行的一个属性（例如Date changed ），则该属性应重新呈现（这并不意味着删除和创建，只是内容的更改）。 你如何做到这一点？

(2) 在我看来，这些 State 管理库在 React 中比在 Angular 中更需要。 Angular 有变化检测。 因此，如果您在输入框中键入内容，model 将已经具有该值。 同样，如果您从列表中删除一行，Angular 将知道其他行没有更改。 这样，它就不需要 store（就此而言，这里甚至不需要 observables，但当然项目列表是异步的，因此它将是一个 observable）。 使用商店而不让整个页面在任何更改时重新呈现的一种解决方案是在每行中使用的每个属性（产品名称、日期等）上使用distinctUntilChanged() )。 如果您使用商店中的select() ，这将自动完成。 但是，我不知道当你有一个项目列表时是否可以这样做......

Answer 1

订阅阵列的最简单方法是使用异步 pipe。

在您的 HTML 中，您所要做的就是{{yourObservableArray$ | async}} {{yourObservableArray$ | async}} 。 异步 pipe 将处理监听任何更改，以及自行处理。

需要注意的一件事，您提到当您单击编辑时，您会创建一个新的 state，这是不正确的。 仅当您跟踪的任何值已更改时，您才从减速器返回更新的 state。 更改您是否处于编辑模式是无关紧要的，除非您计划在用户返回页面时保留该 state。