结果未显示在自动完成中 (Angular)

Question

我使用 ng-prime <p-autocomplete> 通过在后端搜索显示值

这是我的 html

<p-autoComplete [(ngModel)]="agent" [suggestions]="filteredAgents" name="agents" (completeMethod)="filterAgents($event)"  [size]="10"
                    placeholder="Agents" [minLength]="3"></p-autoComplete>

在 component.ts 我在组件开始时像这样初始化数组

filteredAgents: string[] = [];

我有一种方法可以将查询发送到后端并将其推送到数组

 filterAgents(event) {
    let query = event.query;
    this._agentsService.getAgentSearch(query).subscribe(result => {
      result.items.forEach((value) => {
            this.filteredAgents.push(value.name);
            console.log(this.filteredAgents);
       });
    });
}

我在控制台中看到过滤后的值，但在建议中看不到它。

我的问题在哪里？

Answer 1

如果过滤代理是对象数组，请尝试将字段="name" 添加到指令属性。

这里的名称是对象中的一个字段。该指令使用此字段显示在建议中

Answer 2

AutoComplete 使用基于 setter 的检查或 ngDoCheck 来了解建议是否已更改以更新 UI。这是使用不可变属性配置的，当启用（默认）时，使用基于 setter 的检测，因此您的更改（例如添加或删除记录）应始终创建一个新的数组引用，而不是操作现有数组作为如果引用未更改，Angular 不会触发 setters。（Angular 文档）

Array.prototype.push 不会创建新引用，而是会改变原始数组。所以你需要做一个新的。

 filterAgents(event) {
    let query = event.query;
    this._agentsService.getAgentSearch(query).subscribe(result => {
            this.filteredAgents = [...result.items.map(e => e.name)]
        });
    }

我映射结果以提取名称。

结果未显示在自动完成中 (Angular)

Result is not display in autocomplete (Angular)

javascript

typescript

primeng

angular