I'm trying to have an infinite scrolling section in my application. To achieve this I'm using this component to handle the scroll events and so on. When the scroll reaches the bottom of the div I'm calling a function to get more data. So far so good.
To make this function more efficient I'm trying to wait a few seconds before the call is made as well as make sure that the data is processed properly. To do this I've been looking at the example shown on the Angular website that showcases a wikipedia search.
I have a similar setup to what is being shown in the article, my problem is that I'm getting the following error when I call switchMap()
:
Type 'void' is not assignable to type 'ObservableInput<{}>'
This is a sample of my code:
private scrollEndActive: Subject<boolean> = new Subject<boolean>();
ngOnInit() {
...
this.scrollEndActive
.debounceTime(1000)
.distinctUntilChanged()
.switchMap(data => {
// ... get data from server
})
}
...
// event to trigger call to server
scrollEnd() {
this.scrollEndActive.next(true);
}
With the code above this is what I'm getting:
From the research I've made it seems to be an issue related to the fact that one should return the Observable (Type 'void' is not assignable to type 'ObservableInput<{}>'). But in my case I'm not sure what is the issue.
I'm working with:
By default, an arrow function () => {...}
has the return type void
unless you return something.
If you want to use switchMap
to return nothing, you can do as yurzui said in the comments, return Observable.empty()
.
That being said, if you return an observable of null in your switchMap
, it means that you don't need switchMap
and you can directly use do
operator, that doesn an action without modifying returned data. Or mergeMap
that allows you to return a new Observable from the data you got from the original one.
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