在订阅方法内设置时，模板中的变量不会更新。

Question

16 浏览2023年4月8日

匿名的 2023年4月9日

0 Comments

我有一个可观察的变量，它的值来自存储器。

我在它上面有一个订阅方法来监听更新。在其中，我试图将一个普通变量赋值给可观察变量的值之一。

我在控制台日志中打印它，以查看是否已更新，确实已更新，但在模板中的值未更新。

我尝试在模板中监听可观察变量，那样可以正常工作。然而，我需要操作返回的答案，所以不能这样做。

我还尝试使用

this.cdr.detectChanges();

这样可以工作，但感觉有点hacky，并且对于这么简单的事情来说有点过度。

另外，万一有人想知道，我的组件没有

ChangeDetectionStrategy=OnPush

。

这是变量的初始化方式。

this.filters$ = this.store.let(getListsContactsFilters());

这是订阅的样子。

this.filters$.subscribe((filters) => {
   this.selectedAreas = filters.selectedAreas;
});

然后在模板中做这个。

  {{area.title}}

我还尝试在模板中打印selectedAreas：

{{selectedAreas | json}}

即使在触发订阅函数后，它仍然保持为空数组。

真的超级简单，所以真不知道为什么不起作用。

我期望在模板中this.selectedAreas有filters.selectedAreas的值。顺便说一下，filters.selectedAreas是一个对象数组。

0

匿名的 · Answer 1 · 2023-06-29T08:31:05+00:00

问题的原因是Angular无法检测其作用域之外（在这种情况下是ngRx）的变化。没有使用detectChanges语句，你不能让它正常工作。这不是过度使用，而是Angular的工作原理。

解决方法是在订阅方法中使用detectChanges手动检测变化。

为什么如果在模板中使用async管道进行订阅，OP的代码就能正常工作？只有当你像OP描述的那样手动订阅时，它才不会更新...

匿名的 · Answer 2 · 2023-09-18T16:59:52+00:00

问题的原因是在模板中使用了async管道，而在subscribe方法中更新了变量的值。解决方法是在模板中使用管道操作符(async)来订阅Observable，并将数据直接绑定到模板中的变量上。

具体的代码如下所示：

this.autoUploadSubscription = this.flow.events$.subscribe(event => {
  // 更新变量的值
});