模板绑定与函数返回Observable和异步管。

Question

注 这是个简单的问题 async}}

source code: import { Component } from "@angular

<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.comeditangular-qbhkg3。

Answer 1

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

1. 因为变化检测永远不会结束： foo$()
2. foo$() 创建一个新的观测值，并延迟发射。
3. 观测点在延迟后发出
4. 发射触发了来自于 async 管子
5. 变动检测电话 foo$() 的模板，然后我们回到步骤2。

我不太清楚你想达到什么目的，但我认为你不应该返回。Observables 方法中的方法，以便在模板中使用。这些应该是readonly类字段。

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$;
}

例子

因为可观察对象保持不变(===)，在引擎盖上都是好的。一旦你添加一个 pipe 至 Observable 你创建了一个新的引用，然后你又回到了无限循环中。

---

的原因是，如果你只是回到 of('delayed')是由于 Observable 不是异步的。Observable会立即返回一个值给 async 管道，而当异步管道调用了 detectChanges() 其实什么都没有发生，因为它仍然处于触发了 foo$() 模板调用。

---

我看到你还链接了你之前发的一个问题，其中涉及到一个装饰符的使用。你应该把那个装饰器改成类字段装饰器，然后你就可以进行下面的操作了。

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

_{我想我可以想出一个方法来让它和方法调用一起工作 但在我深入研究之前，我首先想知道你为什么要把它作为方法调用放在首位？}