HTML模板上显示的数据是“密钥表单”数据。意思是，它需要翻译。为此，我想从模板中调用Async函数。尝试了一下，但没有成功：
模板：
<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")
而且效果很好。
但是，当将Pipe引用到局部变量时，会发生此循环。谁能解释为什么？
tl; dr不要在函数调用中使用异步管道。这是昂贵且长期运行的操作，可能会破坏用户体验，或者在您的情况下导致浏览器崩溃：自己管理观察对象，而不要使用易于使用的 async管道。
如果仍然希望将async管道与函数一起使用，则可以尝试使用ChangeDetectionStrategy.OnPush。这还带来了其他缺点，例如手动运行更改检测（例如this.cdr.detectChanges();和cdr类型为）ChangeDetectorRef。
请注意Angulars Lifecycle系统的工作方式。
由于评估的函数值没有内部引用（Angular用于检查值是否已更改或需要更新），因此生命周期挂钩将不会对其进行检查ngOnChanges，而是使用ngDoCheck，它会运行很多次。
这对于管道尤为严重，而对于异步管道则最糟糕。如果我们称您的async管道使用成本高昂且运行时间长，Angular指出：
昂贵且运行时间长的管道可能会破坏用户体验
否则您的浏览器将崩溃。
请找到此博客文章以进一步解释。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句