我将ngx-chipsautocompleteItems一起用于标记输入,但是添加第一个标记后,下拉列表不再出现,而且console中也没有错误。
HTML

<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时,出现下拉列表
angular - ngx-chips:无法从autocompleteItems添加第二个标签-LMLPHP
但是当试图添加第二个时,下拉列表不会出现
angular - ngx-chips:无法从autocompleteItems添加第二个标签-LMLPHP
Stackblitz

最佳答案

由于使用复数objectoptions,应使用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

09-25 21:52