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

Posted 2021-04-08

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

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

}