每次传入可观察值（RxJS）时调用方法

Posted 2023-05-08

【中文标题】每次传入可观察值（RxJS）时调用方法

【英文标题】：Call method every time on incoming observable value (RxJS)

【发布时间】：2022-01-13 13:01:33

【问题描述】：

我的 Angular 项目中有一个 RxJS observable myObservable$ 用于接收来自我的 devextreme 图表的数据源的数据。我在ngOnInit方法中订阅了它，但是图表似乎是之前绘制的，这导致了我加载页面时它不显示任何数据的问题。然后当我调整图表的大小（也重新渲染它）时，数据会显示出来。 我可以通过调用this.chart.instance.render(); 手动重绘图表，并且我想在观察者第一次收到数据时调用它。我可以在代码中如何以及在何处编写它？

【问题讨论】：

请分享一些代码 ;)

不要在 ngOnInit 中订阅，我认为您应该在创建实例图表后订阅。

【参考方案1】：

您可以使用 Angular 的 async 管道将 myObservable$ 绑定到您的组件，例如

<dx-chart [dataSource]="myObservable$ | async"/>

那你就不用在ngOnInit订阅了。如果您需要先转换数据，请像这样使用pipe(map())：

export class MyComponent 
  myObservable$ = this.source$.pipe(
    map(data => this.transform(data))
  );

  transform(data) 
    // transform and return
  

我希望它适用于您的 UI 库。如果没有，请在注入到组件中的 ChangeDetectorRef 上调用 detectChanges() 后调用 render() 函数。