时间戳

首页 > 解决方案 > ngx-chips：无法显示自动完成的项目

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

问题描述

在 Angular 中，我想在自动完成中显示项目（流派名称）。在.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 错误类型错误：无法在 TagInputDropdown.getMatchingItems (ngx-chips.js:1216 at Array.filter () 处读取 TagInputDropdown.matchingFn (ngx-chips.js:207) 处未定义的属性“toString” chip.js:1208) 在 SafeSubscriber.TagInputDropdown.show [as _next] (ngx-chips.js:1011) 在 SafeSubscriber.__tryOrUnsub (Subscriber.js:183) 在 SafeSubscriber.next (Subscriber.js:122) 在订阅者。 _next (Subscriber.js:72) 在 Subscriber.next (Subscriber.js:49) 在 FilterSubscriber._next (filter.js:33)

标签： angularngx-chips

解决方案

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

工作演示

推荐阅读