My page consists of several ng-select (Custom server-side search) dropdowns created by a *ngFor directive, having the possibility to pick multiple items from each dropdown.
I also want to include the virtual scroll functionality but I don't know how to make another server request and update the filterValues$
value to contain new data.
component.html
<ng-select [items]="filterValues$[filter.name] | async"
[typeahead]="filterValuesInput$[filter.name]"
[virtualScroll]="true"
[multiple]="true"
[closeOnSelect]="false"
[loading]="filterValuesLoading[filter.name]"
[(ngModel)]="filter.filter_values"
(scrollToEnd)="onScrollToEnd(filter.name)"
(open)="onFilterOpen(filter.name)"
typeToSearchText="No values found"
bindLabel="name">
</ng-select>
component.ts
onScrollToEnd(filterName) {
this.fetchMore(filterName);
}
fetchMore(filterName) {
this.filterValues$[filterName] = combineLatest(this.getFilterValues(filterName, this.afterKey), of(this.existingValues))
.pipe(
map(combined => {
return combined[1].concat(combined[0])
})
);
}
getFilterValues(filterName, after) {
return this.filterValuesInput$[filterName].pipe(
tap(() => this.filterValuesLoading[filterName] = true),
startWith(''),
distinctUntilChanged(),
switchMap(term => this.search.getFilterValues(filterName, '' + term, '' + after).pipe(
tap(res => {
this.afterKey = res.after_key;
this.filterValuesLoading[filterName] = false;
this.existingValues = this.existingValues.concat(res.filter_values);
this.totalFilterValues = res.total_hits;
//this.bufferLength += this.initialValues.length;
}),
map(res => res.filter_values),
catchError(() => of([])) // empty list on error
))
)
}
Any help would be appreciated!
EDIT with updated code: I managed to implement the virtual scroll functionality but whenever I go to the bottom of the dropdown, it triggers the fetchMore()
method and resets this.filterValues$[filterName]
value, moving the dropdown from bottom to top. How can I prevent that?