Массив объектов в качестве входных данных для 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, и в вашем случае одно и то же значение будет сохранено как в ключах, которые отображаются, так и в значении, и по вашему желанию, что вы хотели бы сделать с ним. Надеюсь, что это отвечает на вопрос. Спасибо

Другие вопросы по тегам