时间戳

首页 > 解决方案 > 为什么异步管道的新数据不会导致数据重新呈现？

angular - 为什么异步管道的新数据不会导致数据重新呈现？

问题描述

我已经阅读了很多关于 Angular/ReactJS 的背景知识，并试图很好地理解生命周期钩子以及它们如何一起发挥作用，但仍然让我感到困惑的是以下场景。

假设您有一个 someService，并且在该服务中定义了一个名为 someBehaviorSubject 的 BehaviorSubject。它在 someService 中定义为：

public someBehaviorSubject= new BehaviorSubject<someInterface[]>([]);

然后订阅该行为主题someAPIcall(argument: string): void。someService.someAPIcall 定义为：

someAPIcall(argument: string): void {
  this.http.get<someInterface[]>(argument).subscribe(this.someBehaviorSubject);
}

someInterface 定义为：

interface someInterface {
  data: string
}

假设有一个名为 someParent 的父组件和一个名为 someChild 的子组件。someParent 有两个按钮调用：

someService.someAPIcall("A");

和

someService.someAPIcall("B");

分别。someChild 在模板中有以下内容：

<div*ngFor="let data of someService.someBehaviorSubject | async">
  {{data}}
</div>

在我的观察中，当您单击 someParent 中的按钮 A 或按钮 B 时，数据会正确呈现数据集 A 或 B。但是，如果您在第一组数据呈现后单击另一个按钮，则不会使用新的数据重新呈现数据数据集。我希望它会通过直接订阅 BehaviorSubject 的异步管道。我不明白为什么不重绘数据？

标签： angularreactjsbehaviorsubject

解决方案

为了更新BehaviorSubject值，您需要使用next()将新值推送到BehaviorSubject.

例子：

someAPIcall(argument: string): void {
  this.http.get<someInterface[]>(argument).subscribe(data => 
{
   this.someBehaviorSubject.next(data); 
});}

有关 RxJS 主题的更多信息，请考虑查看文档。

推荐阅读