Ng-select: 远程 API 调用不刷新视图

Question

我正在使用 ng-select 组件 (https://github.com/valor-software/ng2-select)。我实现了一种在用户键入时远程获取数据的方法。但是，将获取新数据并正确填充 (items) 对象，但不会刷新视图。

让我为您提供一些代码：

这是模板：

<ng-select
  #select 
  [allowClear]="'true'"
  id="DropdownTypeaheadQuestion-{{ question.id }}"
  [(items)]="items"
  [formControl]="formControlToUse"
  placeholder="{{ placeholderText }}"
  [multiple]="isMultiple"
  (selected)="execSelected($event)"
  (typed)="execKeypress($event)">
</ng-select>

Controller: 这个方法在按键时执行:

  execKeypress($event) {
    // When remote, clear all items directly on keypress. Else we have an ugly lag because of the debounce time.
    if (this.config.remote === true) {
      this.items = [];
    }
    this.searchSubject.next($event);
  }

Controller：在 ngInit 上，我订阅了该事件以获取新数据：

// Inside ngOnInit I subscribe to the observable
this.searchSubject.debounceTime(500)
                  .takeUntil(this.ngUnsubscribe)
                  .subscribe( (searchTextValue: string) => {

  // save search string on scope
  this.searchTextValue = searchTextValue;
  this.config.httpParams = this.config.httpParams.set('search', searchTextValue);

  // only send search if more than x chars (or empty)
  if (searchTextValue === '' || searchTextValue.length >= this.config.minChars) {
    this.fetchResults();
  }
});

Controller: 这是获取结果的方法:

// fetchResult method fetches the new items and appends them to the items array
this.httpClient.get(url, {params: this.config.httpParams})
               .takeUntil(this.ngUnsubscribe)
               .subscribe( (res: any) => {

                 this.items = this.transformSelectableValuesToConsumables(res);

                 this.select.items = this.items;

                 this.loadingResults = false;
               },
               (error) => {
                 this.loadingResults = false;

                 // TODO: Implement proper error handling
               });

对象的一切正常：项目数组已正确填充。但是，下拉列表仅在我聚焦并返回时才会关闭和打开。似乎是组件中的一个错误。我还在他们的 github:

上提出了一个问题

https://github.com/valor-software/ng2-select/issues/929

非常感谢任何帮助:)

Answer 1

现在我找到了解决办法。

在回调中，您需要分配新项目的地方，手动打开下拉列表：

// fetchResult method fetches the new items and appends them to the items array
this.httpClient.get(url, {params: this.config.httpParams})
           .takeUntil(this.ngUnsubscribe)
           .subscribe( (res: any) => {

             this.items = this.transformSelectableValuesToConsumables(res);

             this.select.items = this.items;

             // [BUGFIX] Here we open the select manually
             (<any>this.select).open();

             this.loadingResults = false;
           },
           (error) => {
             this.loadingResults = false;

             // TODO: Implement proper error handling
           });

并删除组件模板中的 [items] 赋值：

<ng-select
  #select 
  [allowClear]="'true'"
  id="DropdownTypeaheadQuestion-{{ question.id }}"
  [formControl]="formControlToUse"
  placeholder="{{ placeholderText }}"
  [multiple]="isMultiple"
  (selected)="execSelected($event)"
  (typed)="execKeypress($event)">
</ng-select>

所以这些项目将完全通过控制器中的 @ViewChild 分配来处理。

这是完整的解决方案：Link

Ng-select: 远程 API 调用不刷新视图

Ng-select: Remote API call doesn't refresh the view

angular-ngselect

angular