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"}

当我在浏览器的“输入标签”中输入内容时，它会显示以下错误：

core.js:6014 错误类型错误：无法读取未定义的属性“toString” 在 TagInputDropdown.matchingFn (ngx-chips.js:207) 在 ngx-chips.js:1216 在 Array.filter() 在 TagInputDropdown.getMatchingItems (ngx-chips.js:1208) 在 SafeSubscriber.TagInputDropdown.show [as _next] (ngx-chips.js:1011) 在 SafeSubscriber.__tryOrUnsub (Subscriber.js:183) 在 SafeSubscriber.next (Subscriber.js:122) 在 Subscriber._next (Subscriber.js:72) 在 Subscriber.next (Subscriber.js:49) 在 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