ngx-chips：无法显示自动完成的项目

Question

在 Angular 中，我想在自动完成中显示项目 (genreName)。在 .html 我写了以下内容：

 <tag-input [ngModel]="genre" [onlyFromAutocomplete]="true">
            <tag-input-dropdown [showDropdownIfEmpty]="false"
                                [autocompleteItems]="responseRawGenreList">
            </tag-input-dropdown>
</tag-input>

在.ts文件中，我写了以下代码：

this.commonService.getAllGenre(this.userToken).subscribe((data: any) => {
  this.responseRawGenreList = data.data;
  console.log(this.responseRawGenreList)
});

以上代码综合结果如下：

[0 … 99]
0: {genreId: 4, genreName: "Action", genreDescription: "", status: "ONE"}
1: {genreId: 5, genreName: "Action", genreDescription: "", status: "ONE"}
2: {genreId: 6, genreName: "Action", genreDescription: "", status: "ONE"}
3: {genreId: 7, genreName: "ऐक्शन", genreDescription: "", status: "ONE"}

当我在浏览器的 'input tag' 中输入内容时，显示以下错误：

core.js:6014 ERROR TypeError: Cannot read property 'toString' of undefined at TagInputDropdown.matchingFn (ngx-chips.js:207) at ngx-chips.js:1216 at Array.filter () at TagInputDropdown.getMatchingItems (ngx-chips.js:1208) at SafeSubscriber.TagInputDropdown.show [as _next] (ngx-chips.js:1011) at SafeSubscriber.__tryOrUnsub (Subscriber.js:183) at SafeSubscriber.next (Subscriber.js:122) at Subscriber._next (Subscriber.js:72) at Subscriber.next (Subscriber.js:49) at FilterSubscriber._next (filter.js:33)

Answer 1

您需要添加 [identifyBy] 和 [displayBy] 并传递属性名称。

您可以设置：

identifyByProperty = 'genreId';

[identifyBy]="identifyByProperty"

或者，

identifyBy="genreId"

这样试试：

<tag-input [ngModel]="genre" [onlyFromAutocomplete]="true">
    <tag-input-dropdown [autocompleteObservable]="requestAutocompleteItems" displayBy="genreName"
        identifyBy="genreId">
    </tag-input-dropdown>
</tag-input>

Working Demo

ngx-chips：无法显示自动完成的项目

ngx-chips: unable to show auto complete items

angular

ngx-chips