如何使用 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。