I`m getting an endless loop when I try to bind a async function like this:
<tr *ngFor="let i of items">
<td>{{myAsyncFunc(i) | async}}</td>
</tr>
this is the function:
private myAsyncFunc(i: string): Promise<string> {
return Promise.resolve("some");
}
I'm doing something wrong? Or this is a bug?
You're returning a new Promise from myAsyncFunc(i: string) 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 async pipe triggering a change detection cycle when its input Promise resolves. On this new change detection cycle, angular will call myAsyncFunc(i: string) and get a new Promise to observe, which then resolves the whole thing starts again.
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.
@Pipe({
name: 'customPipe'
})
export class customPipe implements PipeTransform {
constructor(private someService: SomeService) {}
/**
*
* @param id
*/
transform(id: number): Observable<boolean> {
return this.someService.shouldShow(id);
}
}
And in your template you can call your async pipe as:
<td>{{id | customPipe | async}}</td>
You can check my blogpost on this specific topic, when it strikes our project consuming 5GB od browser RAM :)
It's here
Simplest way to heal this issue is (as already mentioned) don't use function returned promise direct in template: {{ getPromise(id) | async }} but store this promise in controller (.ts file) and refer to it in view.
In addition, this can be healed by changing change detection settings to push-pull, but in my opinion it's brings way more evil than good.
