Angular Ng select：远程API调用不'；不要刷新视图

我正在使用

ng select

component（）。 我实现了一种在用户输入时远程获取数据的方法。 但是，将获取新数据并正确填充（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>

控制器：在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();
  }
});

控制器：这是获取结果的方法：

// 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数组已正确填充。但是，只有当我向外和向内聚焦时，下拉菜单才会关闭和打开。似乎是组件中的一个bug。我还就他们的github提出了一个问题：

---

非常感谢您的帮助：）

现在我找到了解决方案

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

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

因此，这些项目将完全通过控制器中的

@ViewChild

分配进行处理

以下是整个解决方案：

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

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