使用订阅与异步管道时来自同一可观察对象的不同结果答案

【问题标题】：Different results from the same observable when using subscribe vs. async pipe使用订阅与异步管道时来自同一可观察对象的不同结果
【发布时间】：2019-10-23 20:31:09
【问题描述】：

我是一名业余爱好者，并且正在自学 Angular 一年。在尝试开发自定义分页服务以从 firebase 检索数据时，我想出了一个 observable 在使用异步管道或普通订阅时返回不同的数组。

基本上，我的 observable 使用扫描运算符来累积从 firebase 获取的数据。它有 2 个方法：init 获取第一个数据并使用初始数据设置 observable，以及 addData 获取更多数据。

启动服务并添加一些数据后，如果我再次初始化它，如果使用正常订阅，它不会重置数据。但如果使用异步管道，服务会按预期重置数据。为什么订阅和异步管道在预期具有相同行为时却具有不同的行为？

我在 stackblitz 中创建了错误的简化再现：

https://stackblitz.com/edit/angular-3vroi2

当点击“重置数据”按钮时，订阅返回不会重置。并且异步管道返回的相同数据会相应地重置。

目前，我已经在我的项目中使用异步管道，但仍然无法理解为什么它们的工作方式不同。希望有人能帮我弄清楚。

【问题讨论】：

致电init()后必须退订并重新订阅这篇文章会让你很感兴趣：blog.thoughtram.io/angular/2018/03/05/…

标签： angular rxjs

【解决方案1】：

问题出在这里：

 this.data = this._data.asObservable().pipe(
      scan( (acc, val) => {
        return acc.concat(val)
      }, []),
      shareReplay(1)
    )

此声明对已订阅 this.data 旧值的订阅者没有任何影响 - 例如您在 child.component 中的手动订阅 - 他们将继续订阅旧值。

另一方面，您的异步管道正在订阅当时恰好存储在 page.data 中的任何值。

<li *ngFor="let item of page.data|async">{{item}}</li>

因此，当您将 page.data 设置为新的 Observable 时，异步管道会取消订阅 page.data 的旧（Observable）值并订阅新的（Observable）值。

【讨论】：