Массив объектов в качестве входных данных для autocompleteItems в ngx-chips
Я использую угловые 4 ngx-чипы для ввода тегов. По следующей ссылке 'ngx-chips' увидел проблему с массивом объектов в качестве входных данных для 'autocompleteitems', но не в состоянии распечатать выпадающие элементы. //arrayOfObjects = [{id: 0, name: 'Angular'}, {id: 1, name: 'React'}]; и хотите напечатать имя в раскрывающемся списке
<tag-input [ngModel]="['@item']"
[onlyFromAutocomplete]="true">
<tag-input-dropdown [showDropdownIfEmpty]="true"
[autocompleteItems]="arrayOfObjects">
</tag-input-dropdown>
Но не в состоянии распечатать выпадающие имена. Я что-то пропустил??
2 ответа
Я думаю, что вы должны прочитать документацию более тщательно.
особенно этот раздел
identifBy - [?string]
Как и для ввода тегов, это свойство определяет свойство отображаемого значения объекта, переданного автозаполнению.
displayBy - [?string]
Как и для ввода тегов, это свойство определяет свойство уникального значения объекта, передаваемого автозаполнению.
ваш tag-input-dropdown
должен выглядеть так
<tag-input-dropdown [identifyBy]="'id'" [displayBy]="'name'" [showDropdownIfEmpty]="true" [autocompleteItems]="arrayOfObjects">
Надеюсь, это поможет. Всего наилучшего.
Кроме использования, как это:
<tag-input [ngModel]="['@item']"
Вы можете просто связать ngModel с таким элементом:
<tag-input [ngModel]="items"
и затем вы можете связать его с переменной items = [] в вашем файле.ts, а ниже вы можете напечатать добавленные теги так:
<p *ngFor="let i of items">{{ i.display }}</p>
ИЛИ ЖЕ
<p *ngFor="let i of items">{{ i.value }}</p>
Объект будет сохранен так:
items: any = [
{ display: 'Javascript', value: 'Javascript' },
{ display: 'Typescript', value: 'Typescript' },
{ display: 'Go', value: 'Go' }
];
Он сохранит добавленные теги в объекте с ключами: display и value, и в вашем случае одно и то же значение будет сохранено как в ключах, которые отображаются, так и в значении, и по вашему желанию, что вы хотели бы сделать с ним. Надеюсь, что это отвечает на вопрос. Спасибо