我通过后端搜索使用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);
});
});
}
我在控制台中看到了过滤值,但我没有在建议中看到它。
哪里可以成为我的问题?
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来提取名字。
如果筛选的代理是对象数组,请尝试将field =“name”添加到指令属性。
这里name是对象中的一个字段。该指令使用此字段显示建议