Angular 使用 rxjs 运算符更改布尔标志答案

【问题标题】：Angular using rxjs operator to change boolean flagAngular 使用 rxjs 运算符更改布尔标志
【发布时间】：2021-07-22 04:27:35
【问题描述】：

我正在尝试重构一个 get http 请求。我现在使用的代码是从服务中获取数据，并且在订阅方法中也改变了一个布尔标志

 this.eventsService.getEvents(this.pageSize, this.currentPage).subscribe(
  (data) => {
    this.busy = false
    this.events = data.events
  }
);

我已经重构在我的视图上使用 Observable，现在这段代码看起来像这样，组件代码：

const $results = this.eventsService.getEvents(this.pageSize, this.currentPage);
this.$events = $results.pipe(tap(() => { this.busy = false } ), map(data => data.events));

查看代码（原生脚本）：

<ListView *ngIf="!busy" [items]="$events | async" ></ListView>

它确实在视图中提供了正确的内容，但 busy 标志在点击操作符中没有改变。以某种方式更改 pipe() 中的布尔值是否可行？

【问题讨论】：

重构代码中的订阅在哪里？我不确定这段代码的上下文。它在方法中吗？应该是this.$results？
我在视图文件中使用异步管道
使用哪个流？ $results 或 $events?
$events，我在描述中从我的视图中添加了一行
如果它在视图中显示正确的内容，那么busy 一定是假的？（你重构的代码看起来基本没问题，所以想知道是否还有其他问题？）

标签： angular rxjs

【解决方案1】：

事情是这样的：

在busy 为假之前，您的组件不会显示，因为*ngIf="!busy"
在组件显示之前，$events 不会被订阅（提醒：在订阅之前，Observable 链中不会发生任何事情）

因此这是行不通的：订阅不会发生，因为标志为真，标志将保持真，因为没有订阅。

要解决这个问题，我会订阅 Typescript 代码并去掉 async 管道。

【讨论】：