Ngx-Chips -收到响应后未更新自动完成列表

Question

我在我的项目中使用ngx-chips插件。

现在，使用对服务器的Http调用填充了下拉列表。

myContactList数据也会在视图中更新，但我看不到下拉列表。如果我再次输入一些文本，列表就会出现。但是列表是旧的，而不是最新请求的数据。

这也是这个插件中注册的一个问题。See issue here

我想要列表更新，并显示为我收到响应pron服务器。

HTML：

<tag-input id="myAnchor"  [(ngModel)]='items' (onTextChange)="onTextChange($event)" [onlyFromAutocomplete]="true">
    <tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteItems]="myContactList">
        <ng-template let-item="item" let-index="index">
            {{ item.display }}
            <delete-icon (click)="input.removeItem(item, index)"></delete-icon>
        </ng-template>
    </tag-input-dropdown>
</tag-input>   

{{myContactList | json}}

TS：

onTextChange(text) {
    const data = {'Text': text};
    this.Service = this.myContactService.getSearchedContacts(data).subscribe(responseData => {
        this.myContactList = [];
        for (let index = 0; index < responseData.length; index++) {
            responseData[index].display = responseData[index].name;
            responseData[index].value = responseData[index].id;
            this.myContactList.push(responseData[index]);
        }
    });
}

Answer 1

它对我的影响是这样的：

<tag-input   [(ngModel)]='items' (onTextChange)="change($event)" [onlyFromAutocomplete]="false">
<tag-input-dropdown [showDropdownIfEmpty]="true" [autocompleteItems]="preparedTags">
  <ng-template let-item="item" let-index="index">
    {{ item.display }}
    <delete-icon (click)="input.removeItem(item, index)"></delete-icon>
  </ng-template>
</tag-input-dropdown>

​

 change(value) {
this.preparedTags = [];
this.zone.run(() => {

  setTimeout(() => {
    this.apiProvider.getSimpleSearchKeyWords(value)
      .then((res) => {


          for (let i = 0; i < JSON.parse(JSON.stringify(res)).data.length; i++) {

          this.preparedTags.push(JSON.parse(JSON.stringify(res)).data[i].type + " " + JSON.parse(JSON.stringify(res)).data[i].text)

          }
        }, (err) => {

        }
      );

  }, 100);

});
}

Answer 2

你可以参考下面的代码: HTML：

<tag-input name='tag2' [ngClass]="'tag-select'" theme='bootstrap'  
                                        [placeholder]="'Select Name +'" [secondaryPlaceholder]="'Select Name +'"
                                        [ngModel]="['Material']" [onlyFromAutocomplete]="true"  (onTextChange)="onTextChange($event)" (onSelect)="onSelectedre($event)" (onAdd)="onItemAddeder($event)"[editable]='true' (onTagEdited)="onTagEdited($event)">
                                        <tag-input-dropdown [appendToBody]="false" [displayBy]="'Name'" [identifyBy]="'id'"
                                          [autocompleteObservable]="requestAutocompleteItems "  (onAdd)="onItemAdded($event)"
                                          (onSelect)="onSelectedtag($event)" >
 </tag-input-dropdown>
 </tag-input>

.ts文件：

 lstCallAPI=['item1', 'item2', 'item3'];

        loadPropertyTypeData(){
        this._dataService.get('/api/product/get-add-property')
        .subscribe((response: any) => {
         for (let index = 0; index < response.result.length; index++) {
           const element = response.result[index];
          this.lstCallAPI.push(element.Name);
         }
          this.modalOverflow.show();
        });
      }
    public requestAutocompleteItems = (text: string): Observable<string[]> => {
      return of(this.lstCallAPI);
    };