对象的数组作为NGX-Chips中自动固定的输入

Question

我正在使用Angular 4 ngx-chips用于输入标签。从以下链接" 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>

但无法打印下拉名称。我想念什么吗？

Answer 1

我认为您应该更透彻地阅读文档。

特别是本节

标识 - [？string]

与标记输入一样，此属性定义了传递给AutoComplete

的对象显示的值的属性

displayby- [？string]

与标记输入一样，此属性定义了传递给AutoComplete的对象的唯一值的属性

您的tag-input-dropdown应该看起来像

<tag-input-dropdown [identifyBy]="'id'" [displayBy]="'name'" [showDropdownIfEmpty]="true" [autocompleteItems]="arrayOfObjects">

我希望这会有所帮助。最好的。

Answer 2

除了这样使用：

<tag-input [ngModel]="['@item']"

您只需将ngmodel绑定到这样的项目：

<tag-input [ngModel]="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' }
 ];

它将添加的标签保存在带有键的对象中：显示和值，在您的情况下，相同的值将保存在显示和值的密钥中，以及您的愿望。希望这回答这个问题。谢谢