从HTML模板调用异步功能(可观察到的Retunes) [英] Call Async functions (Retunes Observable) from HTML template

问题描述

HTML模板上显示的数据是密钥表单"数据.意思是，它需要翻译.为此，我想从模板中调用Async函数.尝试了这个，但没有成功:

Data displayed on HTML template is Key form data. Meaning, it needs to be translated. For that purpose, I would like to call an Async function from my template. Tried this, with no success:

模板:

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

目前这样做的原因是什么?

What is the currect why of doing this?

#修改

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

This is making my browser crash. Getting into an endless loop calling translateServingStyle()

我尝试删除我的功能代码，而只是返回

I have tried removing my function code, and just returning

of("some string")

它工作正常.

但是，当将Pipe引用到局部变量时，会发生此循环.谁能解释为什么?

But when referencing a Pipe to a local Variable, this loop happens. Can anyone please explain why?

推荐答案

tl; dr 不要将异步管道与函数调用一起使用.这是昂贵且长期运行的操作，可能会破坏用户体验，或者导致您的浏览器崩溃:您可以自己管理可观察对象，而不是使用易于使用 async 管道进行操作.

tl;dr Don't use the async pipe with function calls. This is expensive and long-running and can destroy the user experience or in your case crash your browser: Manage your observables yourself and not with the easy to use async pipe.

如果您仍想将 async 管道与功能一起使用，则可以尝试使用

If you still want to use the async pipe with a function, you can try using the ChangeDetectionStrategy.OnPush. This comes with other downsides, such as running the change detection manually, e.g. with this.cdr.detectChanges(); and cdr being of type ChangeDetectorRef.

请注意Angulars Lifecycle系统的工作原理.

Please be aware of how Angulars Lifecycle system works.

由于评估的函数值没有内部引用(Angular用于检查值是否已更改或需要更新)，因此生命周期挂钩 ngOnChanges 将不会对其进行检查，但是而不是 ngDoCheck ，它可以运行很多次.

Since evaluated function values do not have an internal reference (which Angular uses to check whether values have changed or need to be updated), they won't be checked by the lifecycle hook ngOnChanges, but rather with ngDoCheck, which runs a lot of times.

这对于管道尤为严重，而对于异步管道则尤为严重.如果我们称您使用 async 管道昂贵且运行时间长，Angular指出:

This is especially bad with pipes, and the worst with the async pipe. If we call your usage of async pipes expensive and long running, Angular states, that:

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

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

或者您的情况导致浏览器崩溃.

or in your case crash the browser.

请找到

Please find this blog post for further explanation.

这篇关于从HTML模板调用异步功能(可观察到的Retunes)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！