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错误TypeError：无法读取未定义的属性'toString' 在TagInputDropdown.matchingFn（ngx-chips.js：207）在ngx-chips.js：1216 在Array.filter（）在TagInputDropdown.getMatchingItems（ngx-chips.js：1208）在SafeSubscriber.TagInputDropdown.show [作为_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

ngx筹码：无法显示自动完成的项目

1 个答案: