angular - PrimeNg 自动完成建议未加载

标签 angular primeng

我正在尝试在我的项目中实现 PrimeNg AutoComplete 控件。

我指的是这个PrimeNg

这些是我遵循的步骤。

<强>1。添加了模块。

import { AutoCompleteModule } from 'primeng/autocomplete';

<强>2。导入模块

 imports: [CommonModule, FormsModule, AutoCompleteModule],

<强>3。创建了字符串数组。

  brands: string[] = ['Audi', 'BMW', 'Fiat', 'Ford', 'Honda', 'Jaguar', 'Mercedes', 'Renault', 'Volvo', 'VW'];

<强>4。添加了 p-模板

    <p-autoComplete [(ngModel)]="brand" [suggestions]="this.brands" (completeMethod)="search($event)" [size]="30 [minlength]="1" placeholder="Tags"></p-autoComplete>

在运行项目时, View 已加载,但当我开始在文本框中输入内容时,尽管加载 gif 可见,但建议未加载。

控制台没有错误。

在提出这个问题之前我已经查看了所有博客和文档,但没有找到任何解决方案。

我有什么遗漏的吗?

非常感谢任何帮助。

最佳答案

供将来引用,

最初我认为如果我按原样返回建议数组, (completeMethod) 属性不会产生任何影响。但需要的是,建议数组必须改变,事实上每次我们在文本框中输入文本时都必须有一个新的引用。

下面是文档的快照。

https://www.primefaces.org/primeng/#/autocomplete

Change Detection

AutoComplete either uses setter based checking or ngDoCheck to realize if the suggestions has changed to update the UI. This is configured using the immutable property, when enabled (default) setter based detection is utilized so your changes such as adding or removing a record should always create a new array reference instead of manipulating an existing array as Angular does not trigger setters if the reference does not change. For example, use slice instead of splice when removing an item or use spread operator instead of push method when adding an item. On the other hand, setting immutable property to false removes this restriction by using ngDoCheck with IterableDiffers to listen changes without the need to create a new reference of data. Setter based method is faster however both methods can be used depending on your preference.

关于angular - PrimeNg 自动完成建议未加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49247909/

相关文章:

javascript - Angular 5 自定义错误处理程序 : Display Error-message

html - 覆盖 PrimeNG 组件 CSS

angular - 属性 'value' 在primeng 表上的类型 'FilterMetadata' 上不存在

html - 如何显示 primeNg inputSwitch 的未选中元素?

html - 在最小化浏览器期间,网格标题将隐藏在 p-dialog 中

Angular 2/PrimeNg - 通过@ViewChild 更新图表

javascript - 如何在 Highcharts 饼图上设置系列标签的样式?

angular - Webpack 提供的 Angular 2 App 的基于环境的属性?

angular - 通过 Angular2 中的嵌套组件发出事件

javascript - 在 Angular 中存储大型静态数组的最佳做法是什么?