带有函数返回 Observable 和异步管道的模板绑定

Question

注意这是Angular template binding with Observable async pipe issue的简化问题

模板：

<div>{{foo()$ | async}}</div>

源代码：

import { Component } from "@angular/core";
import { BehaviorSubject, of, Observable } from "rxjs";
import { tap, delay, map, switchMap, concatMap } from "rxjs/operators";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  private index = 0;
  foo$(): Observable<any> {
    console.log("aaa")
    return of("Delayed");
  }
}

上面的代码按预期工作：

但是，如果我将.pipe(delay(1)) 添加到foo$()：

  foo$(): Observable<any> {
    return of("Delayed").pipe(delay(1));
  }

它不起作用并在控制台日志中保留“aaa”。

见https://stackblitz.com/edit/angular-qbhkg3

Answer 1

从模板调用的方法，在每个变化检测周期被调用。因为您使用的是async 管道，所以每次发出都会触发更改检测。所以基本上你正在创建一个无限循环，这就是它永远不会显示值的原因，因为变化检测永远不会完成：

1. 查看初始化模板调用foo$()
2. foo$() 创建一个 -new- observable 并延迟发射
3. observable 在延迟后发射
4. 发射从async 管道内触发更改检测
5. 更改检测调用模板中的foo$()，我们返回到第 2 步

目前还不清楚您要实现什么，但我认为您不应该从要在模板中使用的方法中返回 Observables。这些应该是只读类字段：

readonly foo$ = of("Delayed").pipe(delay(1));

但是可以使用方法，但您必须确保该方法返回相同的Observable：

private readonly _foo$: Observable<any> = of("Delayed").pipe(delay(1));

foo$(): Observable<any> {
  console.log('here');
  return this._foo$;
}

example

因为可观察对象保持不变 (===)，所以一切都很好。将pipe 添加到Observable 后，您将创建一个新引用并返回无限循环。

---

如果你只返回of('delayed')，它不会进入无限循环的原因是因为Observable不是这样异步的。 Observable 将立即向async 管道返回一个值，当异步管道调用detectChanges() 时，什么都没有发生，因为它仍然与触发foo$() 模板调用的更改检测周期处于同一周期。

---

我看到您还链接了您之前发布的一个涉及使用装饰器的问题。您应该将该装饰器更改为类字段装饰器，然后可以执行以下操作：

@NeedsElement(sp(115621), ap(116215))
readonly insuredType$!: Observable<string>;

_{我想我可以想办法让它与方法调用一起工作，但在我深入研究之前，我首先想知道为什么你首先希望它成为方法调用子>}