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

【问题标题】：Ngx-Chips - Autocomplete list not updated after receiving responseNgx-Chips - 收到响应后未更新自动完成列表
【发布时间】：2017-12-30 07:04:46
【问题描述】：

我在我的项目中使用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]);
        }
    });
}

【问题讨论】：

同样的问题:)

标签： angular list ngx-chips

【解决方案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);

});
}

【讨论】：

【解决方案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);
    };

【讨论】：