angular - 吴选择 : Remote API call doesn't refresh the view

Question

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

让我为您提供一些代码:

这是模板:

<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
               });

对象的一切都正常工作:items 数组被正确填充。但是，下拉列表仅在我聚焦并返回时才会关闭和打开。似乎是组件中的一个错误。我也在他们的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>

因此，这些项目将完全通过 Controller 中的 @ViewChild 分配进行处理。

这是完整的解决方案:Link