NGRX-如何确保每次状态更改时都更新视图?

我有一个视图,该视图取决于3个变量,并且每次状态更改时都应更新该视图。 我通过选择器获得了值Observable s,并在模板中的async管道中使用了它们。

问题是有时状态会更改,但是view不会更新。刷新页面大约每20次就会发生这种情况。

我如何知道状态已更新?我订阅了store$,并记录了所有更改的值。因此有时我会在控制台上看到状态更改,但在视图中却看不到!

是否有办法确保视图正确渲染?

代码

在我的组件中:

    this.homeFacade.loadOrderTypes();
    this.orderTypes$ = this.homeFacade.getOrderTypes();
    this.showRegisterButton$ = this.homeFacade.getRegisterButtonVisibility();

loadOrderTypes函数调度一个操作,以从Web服务加载数据。

更新

我扩展了async管道,并尝试在该管道中进行一些记录。这是未更新视图时的日志:

@ngrx/store/update-reducers
12:45:31.729 async-test.pipe.ts:10 Subscribed async test pipe!
12:45:31.742 async-test.pipe.ts:10 Subscribed async test pipe!
12:45:32.236 client:52 [WDS] Live Reloading enabled.
12:45:32.273 home.reducer.ts:39 [Home Page] Load order type start
12:45:32.275 home.reducer.ts:39 [Home Page] Load order type success
12:45:32.277 home.reducer.ts:39 [Home Page] Check order type success

这是更新视图时的日志:

@ngrx/store/update-reducers
12:55:15.618 async-test.pipe.ts:10 Subscribed async test pipe!
12:55:15.631 async-test.pipe.ts:10 Subscribed async test pipe!
12:55:16.123 home.reducer.ts:39 [Home Page] Load order type start
12:55:16.126 home.reducer.ts:39 [Home Page] Load order type success
12:55:16.128 home.reducer.ts:39 [Home Page] Check order type success
12:55:16.137 async-test.pipe.ts:10 Subscribed async test pipe!
12:55:16.151 async-test.pipe.ts:10 Subscribed async test pipe!
12:55:16.151 async-test.pipe.ts:10 Subscribed async test pipe!
jinjing003 回答:NGRX-如何确保每次状态更改时都更新视图?

我需要查看代码,但是我的猜测是,视图是在异步管道订阅可观察对象之前呈现的。

如果您这样做,并且xhr请求了可观察对象,那么可能是在收到第一个响应后呈现了视图。

要确保是这种情况,请装饰异步管道。 Check link here。在构造函数中,进行一些日志记录,看看首先发生什么。状态更改或管道的构造。

本文链接:https://www.f2er.com/3133577.html

大家都在问