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

问题描述 投票:0回答:2

我通过后端搜索使用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);
       });
    });
}

我在控制台中看到了过滤值,但我没有在建议中看到它。

哪里可以成为我的问题?

javascript angular typescript primeng
2个回答
1
投票

AutoComplete使用基于setter的检查或ngDoCheck来实现建议是否已更改以更新UI。这是使用immutable属性配置的,当启用(默认)基于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)]
        });
    }

我把结果用maped来提取名字。


0
投票

如果筛选的代理是对象数组,请尝试将field =“name”添加到指令属性。

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

© www.soinside.com 2019 - 2024. All rights reserved.