时间戳

首页 > 解决方案 > 在 primeNG 焦点上未触发 completeMethod 事件

angular - 在 primeNG 焦点上未触发 completeMethod 事件

问题描述

我正在尝试在我的应用程序中使用自动完成组件。HTML 中的自动完成功能如下所示：

<p-autoComplete [(ngModel)]="student" name="basic"
  [suggestions]="filteredStudents"
  (completeMethod)="filterStudents($event)"
  field="name" [size]="30"
  placeholder="Select student" [minLength]="0">
</p-autoComplete>

如果您注意到我已将“minLength”指定为 0。这样做的需要是在我专注于自动完成输入字段（当然未过滤）时尝试加载建议。但不幸的是，这并没有发生。有趣的是，当我输入一些字符并清除它们时，建议会按预期显示。我在这里可能做错了什么？

请注意，我还尝试使用也不起作用的“onFocus”事件。

TIA

标签： angulareventsangular8primengangular-components

解决方案

使用handleDropdownClick()可以用作解决方法。

<p-autoComplete #ac [(ngModel)]="student" name="basic"
 [suggestions]="filteredStudents"
 (onFocus)="triggerOverlayPanel(ac)"
 (completeMethod)="filterStudents($event)"
 field="name" [size]="30"
 placeholder="Select student" [minLength]="0">
</p-autoComplete>

ts 文件。

AutoComplete ref 触发器handleDropdownClick()就像用户单击下拉菜单并作为参数添加自我一样。

 triggerOverlayPanel(ac: AutoComplete){
  // condition added to check if no chars need to display result 
  if(ac.minLength === 0) {
   ac.handleDropdownClick(ac);
  }
 }

推荐阅读