Angular ng-select 触发（打开）事件时加载异步数据

Question

I'm using ng-select custom server-side search to load data based on what the user types. Currently it only works if a keyword is actually pressed.

<ng-select [items]="filterValues$ | async"
    [typeahead]="filterValuesInput$"
    [multiple]="true"
    (open)="getFilterValues(pref.id)"
    [loading]="filterValuesLoading"
    bindLabel="name"
    [(ngModel)]="filter_values">
</ng-select>

I want to trigger the API request when the select dropdown opens, even if no search term is provided.

getFilterValues(filterId) {
    this.filterValues$ = concat(
      of([]), // default items
      this.filterValuesInput$.pipe(
        distinctUntilChanged(),
        tap(() => this.filterValuesLoading = true),
        switchMap(term => this.service.getFilterValues(filterName, '' + term).pipe(
          map(res => res.filter_values),
          catchError(() => of([])), // empty list on error
          tap(() => this.filterValuesLoading = false)
        ))
      )
    );
}

Any suggestions?

Answer 1

This is happening because the concat is not emitting any value cause of the second observable. You can try using startWith operator for the initial loading

getFilterValues(filterId) {
    this.filterValues$ = concat(
      of([]), // default items
      this.filterValuesInput$.pipe(
        startWith(''),
        debounce(300),
        distinctUntilChanged(),
        tap(() => this.filterValuesLoading = true),
        switchMap(term => this.service.getFilterValues(filterName, '' + term).pipe(
          map(res => res.filter_values),
          catchError(() => of([])), // empty list on error
          tap(() => this.filterValuesLoading = false)
        ))
      )
    );
}

Hope this helps

Answer 2

I have written similar code. I am getting this error in jasmine unit share. Could you please share test for the above code.

    TypeError: Cannot read properties of undefined (reading 'length')
    error properties: Object({ ngDebugContext: DebugContext_({ view: Object({ def: Object({ factory: Function, nodeFlags: 910941713, rootNodeFlags: 1, nodeMatchedQueries: 0, flags: 0, nodes: [ Object({ nodeIndex: 0, parent: null, renderParent: null, bindingIndex: 0, outputIndex: 0, checkIndex: 0, flags: 1, childFlags: 910941713, directChildFlags: 34097153, childMatchedQueries: 0, matchedQueries: Object({  }), matchedQueryIds: 0, references: Object({  }), ngContentIndex: null, childCount: 23, bindings: [ Object({ flags: 8, ns: '', name: 'hidden', nonMinifiedName: 'hidden', securityContext: 0, suffix: undefined }), Object({ flags: 2, ns: '', name: 'ng-untouched', nonMinifiedName: 'ng-untouched', securityContext: undefined, suffix: undefined }), Object({ flags: 2, ns: '', name: 'ng-touched', nonMinifiedName: 'ng-touched', securityContext: undefined, suffix: undefined }), Object({ flags: 2, ns: '', name: 'ng-pristine', nonMinifiedName: 'ng-pristine', securityContext: undefined, suffix: undefined }), Object({  ...
        at <Jasmine>
        at NgSelectComponent.get [as _isTypeahead] (test/test-index.js:210968:63)
        at NgSelectComponent../node_modules/@ng-select/ng-select/fesm5/ng-select.js.NgSelectComponent._setItems (test/test-index.js:210570:18)
        at NgSelectComponent../node_modules/@ng-select/ng-select/fesm5/ng-select.js.NgSelectComponent.ngOnChanges (test/test-index.js:210076:18)
        at checkAndUpdateDirectiveInline (test/test-index.js:64517:19)

HeadlessChrome 95.0.4638 (Mac OS X 10.15.7): Executed 17 of 432 (2 F