从 HTML 模板调用异步函数（Retunes Observable）

Question

HTML 模板上显示的数据是 Key 表单数据。意思是，它需要翻译。 为此，我想从我的模板中调用一个异步函数。试过了，没有成功：

模板：

<span class="myClass-rowValue">{{translateServingStyle(size.defaultServingStyle?.surcharge) | async}}</span>

组件 ts 文件：

servingStylesData$: Observable<ServingStyles_servingStyles[]>;

ngOnInit(): void {
    this.servingStylesData$ = of(this._apollo
      .watchQuery<ServingStyles>({
        query: ServingStylesQuery
      }))
      .pipe(
        filter((query) => !!query),
        switchMap((query) => query.valueChanges),
        take(1),
        takeUntil(this._ngOnDestroy),
        map((response) => response.data.servingStyles)
      );
}

translateServingStyle(servingStyleValue: string): Observable<string> {
    return this.servingStylesData$
      .pipe(
        map((servingStyles) => servingStyles
          .filter((servingStyle) => servingStyle.value === servingStyleValue)
          .map((selectedServingStyle) => selectedServingStyle.value)[0]
          )
      );
  }

这样做的正确原因是什么？

#编辑

这使我的浏览器崩溃。 进入无限循环调用 translateServingStyle()

我尝试删除我的功能代码，然后返回

of("some string")

而且效果很好。

但是当引用一个管道到一个局部变量时，这个循环就会发生。谁能解释一下为什么？

Answer 1

tl;博士 不要将异步管道与函数调用一起使用。这是昂贵且长期运行的，并且可能会破坏用户体验或在您的情况下使您的浏览器崩溃：您自己管理您的 observables，而不是使用 易于使用 async 管道。

如果您仍想将async 管道与函数一起使用，您可以尝试使用ChangeDetectionStrategy.OnPush。这带来了其他缺点，例如手动运行更改检测，例如this.cdr.detectChanges(); 和 cdr 的类型为 ChangeDetectorRef。

---

请注意 Angulars 生命周期系统的工作原理。

由于评估的函数值没有内部引用（Angular 使用它来检查值是否已更改或需要更新），生命周期挂钩 ngOnChanges 不会检查它们，而是使用 ngDoCheck ，它会运行很多次。

这对于管道来说尤其糟糕，而对于异步管道来说最糟糕。如果我们称您使用 async 管道昂贵且运行时间长，Angular 表示：

昂贵且长期运行的管道可能会破坏用户体验

或者在你的情况下使浏览器崩溃。

请找this blog post作进一步解释。