Angular 2 - 异步管道中的无限循环

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Angular 2 - 异步管道中的无限循环相关的知识,希望对你有一定的参考价值。

当我尝试绑定像这样的异步函数时,我得到一个无限循环:

<tr *ngFor="let i of items">
     <td>{{myAsyncFunc(i) | async}}</td>
</tr>

这是功能:

private myAsyncFunc(i: string): Promise<string> {
        return Promise.resolve("some");
}

我做错了什么?或者这是一个错误?

答案

你在每次通话时都会从myAsyncFunc(i: string)返回一个新的Promise,这就是你获得“无限循环”的原因。尝试返回相同的Promise实例;-)

“无限循环”实际上不是传统的无限循环,而是async管道在其输入Promise结算时触发变化检测周期的副作用。在这个新的变化检测周期中,angular将调用myAsyncFunc(i: string)并获得一个新的Promise来观察,然后解决整个事情再次开始。

另一答案

你可以查看关于这个特定主题的博客文章,当它击中我们的项目消耗5GB的浏览器RAM :) 这是qazxsw poi

解决此问题的最简单方法是(如前所述)不要在模板中直接使用函数返回的promise:here,但将此promise保存在控制器({{ getPromise(id) | async }}文件)中并在视图中引用它。 此外,这可以通过将变化检测设置更改为.ts来治愈,但在我看来,这会带来更多的邪恶而不是好的方式。

另一答案

如果您的async / observable要求您传递参数(例如,您在ngFor循环中),也许您可​​以为此创建自定义异步管道。

push-pull

在模板中,您可以将异步管道称为:

@Pipe({
  name: 'customPipe'
})
export class customPipe implements PipeTransform {

  constructor(private someService: SomeService) {}

  /**
   * 
   * @param id 
   */
  transform(id: number): Observable<boolean> {
    return this.someService.shouldShow(id);
  }

}

以上是关于Angular 2 - 异步管道中的无限循环的主要内容,如果未能解决你的问题,请参考以下文章

Angular 11异步验证器触发真实响应的无限循环请求

这个 Angular 异步管道的正确含义是啥?

Angular 2:许多异步管道与一个订阅

*ngFor 在 angular2 中运行无限循环

Angular 5:无法使用异步管道更新模板

异步管道的Angular 9过滤结果