时间戳

首页 > 解决方案 > 结果不显示在自动完成（Angular）中

javascript - 结果不显示在自动完成（Angular）中

问题描述

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

这是我的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);
       });
    });
}

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

我的问题在哪里？

标签： javascriptangulartypescriptprimeng

解决方案

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

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

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

我映射结果以提取名称。

推荐阅读