I'm currently implementing an infinite scrolling feature in my application using a specific component for managing scroll events. When the scroll reaches the bottom of the div, I trigger a function to fetch more data. Everything seems to be working fine so far.
In order to optimize this process, I want to introduce a delay before making the call and ensure that the retrieved data is processed correctly. Following an example on the Angular website featuring a Wikipedia search, I attempted to implement a similar setup.
However, upon calling switchMap(), I encountered the error message:
Type 'void' is not assignable to type 'ObservableInput<{}>'This excerpt showcases part of my code:
private scrollEndActive: Subject<boolean> = new Subject<boolean>();
ngOnInit() {
...
this.scrollEndActive
.debounceTime(1000)
.distinctUntilChanged()
.switchMap(data => {
// ... retrieve data from server
})
}
...
// event triggering server call
scrollEnd() {
this.scrollEndActive.next(true);
}
The screenshot below illustrates the issue:https://i.sstatic.net/PqyB2.png
In my investigations, it appears to be related to returning the Observable (Type 'void' is not assignable to type 'ObservableInput<{}>'). However, I am struggling to pinpoint the exact problem in my case.
My environment includes:
- Angular 4.0.1
- TypeScript 2.2.2
- RxJS 5.2.0