Javascript 从HTML模板调用异步函数（可观察的返回）

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

模板：

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

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]
          )
      );
  }

而且效果很好

但当将管道引用到局部变量时，会发生此循环。谁能解释一下原因吗；dr 不要将异步管道用于函数调用。这既昂贵又长期运行，可能会破坏用户体验，或者在您的情况下会使浏览器崩溃：自己管理您的可观察对象，而不是使用易于使用的

异步
管道

如果仍要将
async
管道与函数一起使用，可以尝试使用。这还有其他缺点，例如手动运行更改检测，例如使用
This.cdr.detectChanges（）和
cdr
属于
ChangeDetectorRef
类型


请注意Angulars生命周期系统是如何工作的

由于计算出的函数值没有内部引用（Angular用于检查值是否已更改或是否需要更新），因此它们不会由lifecycle钩子检查
ngochanges
，而是使用运行了很多次的
ngDoCheck

这对于管道尤其糟糕，对于异步管道最糟糕。如果我们将
async
管道的使用称为昂贵且长期运行的角度状态，那么：

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

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

请查找进一步的解释。
您到底面临什么问题？举个例子。例如，您试图从中绘制的整个对象，并提及显示的是什么键而不是您想要显示的键。我的浏览器卡住了。它进入一个无限循环调用这个函数。。。我试着只返回一个可观察的（使用（“某些”字符串”））当传递一个保存为局部变量的可观测数据时，就会发生这个循环。show servingStylesDatafunction@SachilaRanawaka编辑了我的问题，并添加了服务风格数据谢谢你的回答，它确实让事情变得更清楚了。尽管如此，我已经在使用ChangeDetectionStrategy.OnPush，所以不确定我的功能是什么被召回。你有什么建议吗？不可能从模板传递值，然后异步操作吗？你能创建一个stackblitz吗？我缺少进一步解决这个问题的上下文。好的，我通过接受使用可重新调谐和可观察的函数的非最佳实践来解决这个问题。并创建了一个观察能够使用模板使用变量所需的所有值。接受此答案，tnxGood解决方案。否则，您可以手动处理订阅，而不是使用
async
管道。但如果没有stackblitz，我无法向您展示此解决方案。
of("some string")