0

我的页面由 *ngFor 指令创建的几个ng-select（自定义服务器端搜索）下拉列表组成，可以从每个下拉列表中选择多个项目。

我还想包含虚拟滚动功能，但我不知道如何发出另一个服务器请求并更新filterValues$值以包含新数据。

组件.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>

组件.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
      ))
    )
}

任何帮助，将不胜感激！

使用更新的代码进行编辑：我设法实现了虚拟滚动功能，但是每当我进入下拉列表的底部时，它都会触发该fetchMore()方法并重置this.filterValues$[filterName]值，从而将下拉列表从底部移动到顶部。我怎样才能防止这种情况？

4

1 回答 1

0

我有同样的问题。

问题是 ng-select 试图找到所选值的选项，该选项在第一次加载时可能不可用。例如，您正在加载前 15 个值，但所选选项位于后面的位置，即使您 fetchMore 它可能仍然不在下一次提取中。因此，如果您调用 next 它会将您设置到下拉列表的第一个位置。

如果您使用鼠标滚轮滚动，这可能不是问题，因为它会自动关注鼠标光标所在的位置。但是如果你使用箭头，它总是会跳到开头（这是我的问题）。

我的解决方案是始终在选项列表的开头添加一个附加选项（选定的选项）（以便 ng-select 可以找到它）+ 列表的其余部分。然后该选项可能会在列表中重复，但它的用户友好性是让列表中的第一个选项成为最初选择的选项。

请注意，我使用的是 ControlValueAccessor。

  protected _itemsBufferSource$ = new BehaviorSubject<unknown[]>([]);    
  public items$: Observable<unknown[]> = EMPTY;
  public input$ = new Subject<string>();
  public virtualScrollItems: unknown[] = [];
  public itemsBuffer$: Observable<unknown[]> = this._itemsBufferSource$.asObservable();

<ng-select
  #singleSelect
  [items]="(enableVirtualScrolling ? this.itemsBuffer$ : this.items$) | async"
  ...
  [(ngModel)]="valueChanged"
...

const firstValue:unknown[] = [this.valueChanged];
...
this._itemsBufferSource$.next(
          //add first value to beginning so it would find selected value and arrow virtual scrolling would work(filter out the nulls so there's no error)
          firstValue.concat(this.virtualScrollItems.slice(0, this.virtualScrollingBufferSize)).filter(x => x != null));
于 2021-09-10T11:39:17.317 回答