我将ngx-chips
与autocompleteItems
一起用于标记输入,但是添加第一个标记后,下拉列表不再出现,而且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
时,出现下拉列表但是当试图添加第二个时,下拉列表不会出现
Stackblitz
最佳答案
由于使用复数object
为options
,应使用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