blocks|key|1170333|text|您将在每次调用中从myAsyncFunc(i:+string)返回一个新的承诺，这就是为什么您会得到一个“无止境的循环”。尝试返回相同的诺言实例;-)|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1170334|“无止境循环”实际上不是传统的无止境循环，而是async管道在其输入承诺解决时触发变化检测周期的副作用。在这个新的变化检测周期，角将调用myAsyncFunc(i:+string)，并得到一个新的承诺来观察，然后解决整个事件重新开始。|1170335|entityMap^0|9|M|0|N|5|1W|M|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]|$9|P|A|Q|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|R|8|@]|D|@]|E|$]]]|I|$]]

You're returning a new Promise from <code>myAsyncFunc(i: string)</code> on every call, that's why you get an "endless loop". Try returning the same Promise instance ;-)

The "endless loop" is actually not a traditional endless loop but rather a side-effect of <code>async</code> pipe triggering a change detection cycle when its input Promise resolves. On this new change detection cycle, angular will call <code>myAsyncFunc(i: string)</code> and get a new Promise to observe, which then resolves the whole thing starts again.

blocks|key|346655|text|您可以在这个特定主题上查看我的博客文章，当它击中我们的项目时，我们的项目消耗了5GB的od浏览器RAM+:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|346656|是这里|offset|length|346657|解决此问题的最简单方法是(如前所述)，不要使用模板中直接返回的函数：{{+getPromise(id)+%7C+async+}}，而是将该承诺存储在控制器(.ts文件)中，并在视图中引用它。|style|CODE|346658|此外，这可以通过将检测设置更改为push-pull来治愈，但在我看来，它带来的弊大于利。|346659|entityMap|0|LINK|mutability|MUTABLE|url|https://www.linkedin.com/pulse/how-change-your-angular-app-ram-eating-beast-tomasz-budzi%25C5%2584ski^0|0|1|2|0|0|Y|S|24|3|0|G|9|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@$D|Z|E|10|H|I]|$D|11|E|12|H|I]]|9|@]|A|$]]|$1|J|3|K|5|6|7|13|8|@$D|14|E|15|H|I]]|9|@]|A|$]]|$1|L|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|M|$N|$5|O|P|Q|A|$R|S]]]]

You can check my blogpost on this specific topic, when it strikes our project consuming 5GB od browser RAM :) 
It's <a href="https://www.linkedin.com/pulse/how-change-your-angular-app-ram-eating-beast-tomasz-budzi%C5%84ski" rel="nofollow noreferrer">here</a>

Simplest way to heal this issue is (as already mentioned) don't use function returned promise direct in template: <code>{{ getPromise(id) | async }}</code> but store this promise in controller (<code>.ts</code> file) and refer to it in view. 
In addition, this can be healed by changing change detection settings to <code>push-pull</code>, but in my opinion it's brings way more evil than good.

blocks|key|1368769|text|如果异步/可观测性要求您传递一个参数(例如，您在ngFor循环中)，那么您可以为此创建一个自定义异步管道。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1368770|@Pipe({
++name:+'customPipe'
})
export+class+customPipe+implements+PipeTransform+{

++constructor(private+someService:+SomeService)+{}

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

}|code-block|syntax|javascript|1368771|在模板中，您可以将异步管道调用为：|1368772|<td>{{id+%7C+customPipe+%7C+async}}</td>|1368773|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

If your async/observable requires you to pass a parameter (e.g., you are inside an ngFor loop) perhaps you can create a custom async pipe for that.

<pre><code>@Pipe({
 name: 'customPipe'
})
export class customPipe implements PipeTransform {

 constructor(private someService: SomeService) {}

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

}
</code></pre>

And in your template you can call your async pipe as:

<pre><code>&lt;td&gt;{{id | customPipe | async}}&lt;/td&gt;
</code></pre>

blocks|key|1368821|text|解决办法是使用回忆录。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1368822|您可以创建一个自定义装饰器，以便按照指示这里回溯您的函数。在此之后，您可以编写如下的函数：|1368823|@memoize()++++
private+myAsyncFunc(i:+string):+Promise<string>+{
++++++++return+Promise.resolve("some");
}|code-block|syntax|javascript|1368824|这会缓存最初返回的承诺，当async管道重新检查承诺的状态时，它将得到缓存的承诺，而不是新的承诺。|style|CODE|1368825|注意回传函数的缓存效果。|1368826|entityMap|0|LINK|mutability|MUTABLE|url|https://www.npmjs.com/package/memoizee|1|https://medium.com/angular-in-depth/how-to-improve-angular-performance-by-just-adding-just-8-characters-877bde708ddd^0|7|3|0|0|K|2|1|0|0|D|5|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|F|3|G|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|19|8|@$A|1A|B|1B|M|N]]|9|@]|C|$]]|$1|O|3|P|5|6|7|1C|8|@]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|1D|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

A workaround would be to use <a href="https://www.npmjs.com/package/memoizee" rel="nofollow noreferrer">Memoizee</a>.
You can create a custom decorator to memoize your function as instructed <a href="https://medium.com/angular-in-depth/how-to-improve-angular-performance-by-just-adding-just-8-characters-877bde708ddd" rel="nofollow noreferrer">here</a>. After that you can just write your function as follows:
<pre><code>@memoize() 
private myAsyncFunc(i: string): Promise&lt;string&gt; {
 return Promise.resolve(&quot;some&quot;);
}
</code></pre>
This caches the initially returned Promise and when the <code>async</code> pipe re-checks the Promise's status it will get the cached Promise not a new one.
Be aware of the caching effects of memoizing a function.

I`m getting an endless loop when I try to bind a async function like this: 

<pre><code>&lt;tr *ngFor="let i of items"&gt;
 &lt;td&gt;{{myAsyncFunc(i) | async}}&lt;/td&gt;
&lt;/tr&gt;
</code></pre>

this is the function: 

<pre><code>private myAsyncFunc(i: string): Promise&lt;string&gt; {
 return Promise.resolve("some");
}
</code></pre>

I'm doing something wrong? Or this is a bug?

Angular 2 - Endless loop in async pipe

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

当我尝试像这样绑定异步函数时，我会得到一个没完没了的循环：<tr *ngFor="let i of items"> <td>{{myAsyncFunc(i) | async}}</td></tr>这是一项功能：private myAsyncFunc(i: string): Promise<string> { ...

问异步管道中的角2-环环
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问异步管道中的角2-环环EN