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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With