Using a function in an *ngFor statement:
@Component({
selector: 'foo-view',
template: '<div *ngFor="let foo of loadAll() | async"></div>'
})
export class FooComponent {
loadAll(): Observable<Foo[]> {
return this.http.get(`api/foos`)
.map(response => response.json() as Foo[]);
}
}
Upon running the code, it continuously sends HTTP requests in an infinite loop. Why is this happening and how can I prevent it?
P.S. I am aware of the standard workaround like
@Component({
selector: 'foo-view',
template: '<div *ngFor="let foo of foos"></div>'
})
export class FooComponent implements OnInit {
foos: Foo[] = [];
ngOnInit() {
this.loadAll().subscribe(foos => this.foos = foos);
}
loadAll(): Observable<Foo[]> {
return this.http.get(`api/foos`)
.map(response => response.json() as Foo[]);
}
}
However, I am searching for a way to eliminate the extra variable.