javascript - 从 HTML 模板调用异步函数 (Retunes Observable)

Question

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

模板:

<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

长话短说 不要将异步管道与函数调用一起使用。这是昂贵且长时间运行的，可能会破坏用户体验，或者在您的情况下使浏览器崩溃:您自己管理您的可观察对象，而不是使用易于使用 async 管道。

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

---

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

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

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

An expensive and long-running pipe could destroy the user experience

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

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