ngx芯片:不可能从autocompleteItems添加第二个标签

Question

我使用ngx-chips和autocompleteItems来输入标签，但是在添加了第一个标签之后，下拉列表就不再出现了，而且console中也没有错误。

<tag-input
    [ngModel]="columnsToIgnore"
    [ngModelOptions]="{standalone: true}"
    [placeholder]="'Enter variables to ignore'"
    [secondaryPlaceholder]="'Enter variables to ignore'"
    [onlyFromAutocomplete]="true"
    (onAdd)="addIgnoreColumn($event)"
    (onRemove)="removeIgnoreColumn($event)"
    theme='bootstrap'>
     <tag-input-dropdown
       [autocompleteItems]="selectedDataset.schema.columns"
       [displayBy]="'name'"
       [focusFirstElement]="true">
          <ng-template let-item="item" let-index="index">
            {{ item.name }} : {{ item.type }}
          </ng-template>
     </tag-input-dropdown>
</tag-input>

添加第一个tag时，将显示下拉列表

​

但是，当尝试添加第二个下拉列表时，将不会出现下拉列表。

​

斯塔克布利茨

Answer 1

由于您使用复杂的object作为options，所以应该使用identifyBy，通过identifyBy ngx-chips将选择的项与提供的选项进行比较。

 <tag-input
    [ngModel]="columnsToIgnore"
    [ngModelOptions]="{standalone: true}"
    [placeholder]="'Enter variables to ignore'"
    [secondaryPlaceholder]="'Enter variables to ignore'"
    [onlyFromAutocomplete]="true"
    (onAdd)="addIgnoreColumn($event)"
    (onRemove)="removeIgnoreColumn($event)"
    theme='bootstrap'>
     <tag-input-dropdown
       [autocompleteItems]="selectedDataset.schema.columns"
       [displayBy]="'name'"
       [identifyBy]="'name'" <!-- use any property of object -->
       [focusFirstElement]="true">
          <ng-template let-item="item" let-index="index">
            {{ item.name }} : {{ item.type }}
          </ng-template>
     </tag-input-dropdown>
</tag-input>

工作副本在这里- https://stackblitz.com/edit/angular-icraz4