Primeng Autocomplete结合Formly使用时不显示建议的问题排查

根据场景分析，问题核心出在Primeng Autocomplete的属性配置与模板绑定上，以下是具体修复步骤：

• 替换废弃属性：在autocomplete-type.ts的模板中，将field="name"替换为optionLabel="name"。Primeng新版本已用optionLabel替代旧的field属性，用于指定选项列表中显示的字段名。
  修改后的模板代码：

  <p-autocomplete
    [formControl]="formControl"
    [formlyAttributes]="field"
    [suggestions]="results"
    (completeMethod)="onComplete($event)"
    optionLabel="name"
  ></p-autocomplete>
  

• 验证数据绑定逻辑：确认onComplete方法中接口返回的城市数据已正确赋值给results数组。你的现有代码this.cityService.getCities(event.query).then((data) => { this.results = data; })逻辑正确，只需确保返回的城市对象包含name字段（接口返回数据符合要求）。

• 检查样式依赖：确保已正确导入Primeng样式文件，避免因样式缺失导致overlay面板隐藏。在项目全局样式文件（如styles.css）中添加：

  @import "primeng/resources/themes/lara-light-blue/theme.css";
  @import "primeng/resources/primeng.css";
  

完成以上修改后，输入PARIS等关键词时，Autocomplete的建议面板即可正常显示匹配的城市列表。

内容的提问来源于stack exchange，提问作者Cyril Hanquez