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

Niladri Banerjee-北方邦

在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错误TypeError：无法读取TagInputDropdown.getMatchingItems（ngx-）处ngx-chips.js：1216处Array.filter（）处TagInputDropdown.matchingFn（ngx-chips.js：207）处未定义的属性'toString'订阅者在SafeSubscriber.next（Subscriber.js：122）的SafeSubscriber .__ tryOrUnsub（Subscriber.js：183）处的SafeSubscriber.TagInputDropdown.show [as _next]（ngx-chips.js：1011）处显示[as _next]。 _next（Subscriber.js：72）在Subscriber.next（Subscriber.js：49）在FilterSubscriber._next（filter.js：33）

阿德里塔·沙玛（Adrita Sharma）

您需要添加[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>

工作演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。