PrimeNg自动完成建议未加载

Question

我正在尝试在我的项目中实现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是可见的，但并未加载建议。

控制台没有错误。

在询问之前，我已经查看了所有博客和文档，但没有找到任何解决方案。

有什么我想念的！

非常感谢您的帮助。

Answer 1

为了将来的参考，

最初，我认为（completeMethod）属性将不会按原样返回建议数组。但是需要做的是，每次我们在文本框中输入文本时，建议数组必须更改，实际上必须有一个新引用。

以下是文档中的快照。

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

变更检测

AutoComplete使用基于setter的检查或ngDoCheck来了解建议是否已更改以更新UI。这是使用immutable属性配置的，如果启用了启用（默认）基于设置器的检测，则您的更改（例如添加或删除记录）应始终创建一个新的数组引用，而不是操作现有的数组，因为如果引用引用了Angular不会触发设置器不会改变。例如，删除项目时使用切片而不是拼接，添加项目时使用散布运算符而不是push方法。另一方面，将不可变属性设置为false可通过将ngDoCheck与IterableDiffers结合使用来侦听更改，而无需创建新的数据引用，从而消除了此限制。基于Setter的方法更快，但是可以根据您的喜好使用两种方法。