如何在Angular中绑定p-autoComplete中的值

Question

我有一个带有 p-自动完成功能的搜索框。当我搜索该值时，该值会显示在建议中。

我正在尝试显示 p-自动完成框中的建议中选定的值。但是当我选择时，我得到了[对象对象]。我是角度新手。任何建议都会有帮助。预先感谢！

HTML 代码

  <p-autoComplete id="dataCmpnyAuto" 
      name="dataCmpnyAuto" 
      [suggestions]="dataCmpnyAutoList" 
      (onKeyUp)="startSearch($event.target.value)"
       dropdownIcon="pi pi-angle-down" 
       (onSelect)="getCompanyList($event)"
       formControlName="dataCmpnyAuto">

       <ng-template let-i pTemplate="item">
          <div class="country-item">
            <h6>{{ i.name}}</h6>
            <div>{{ i.id}}</div>
          </div>
       </ng-template>  </p-autoComplete>                                                  

测试组件.ts

startSearch(name:any){
let Type = 0
this.pagesService.getCompanyAutoCmpList(Type, name).subscribe((results) =>{
  const responseData = results.success
  if(responseData && responseData.length>0){
    this.dataCmpnyAutoList = responseData
  }

})}

Answer 1

PrimeNG 不支持单选模式下的所选项目模板。不过有一个解决方法。您可以控制所选项目模板的文本：

<p-autoComplete [field]="getSelectedItemName" ...></p-autoComplete>

getSelectedItemName(item: { id: number; name: string }): string {
  return item.name;
}

堆栈闪电战

Answer 2

如果您想向用户显示名称和 Id，那么我建议准备对象数组，使其与从 api 获取数据的函数的预期输出相匹配

在您的 html 中，只需按照文档添加

field

[在此处阅读][1]

<p-autoComplete  
 [suggestions]="dataCmpnyAutoList" 
(completeMethod)="....."
field="combineNameId" ...>
</p-autoComplete>

在你的 Ts 文件中，映射数组列表以在你的对象中添加

combinedNameId

键

startSearch(name:any){
let Type = 0
this.pagesService.getCompanyAutoCmpList(Type, name).subscribe((results) {
  const responseData = results.success
  if(responseData && responseData.length>0){
    this.dataCmpnyAutoList = responseData .map((item:any)=>({
   ...item,
    combinedNameId: item.name + ' ' + item.id

        })
  }

})}

或者：如果您不想从 api 操作数据数组，您可以使用 p-autocomplete 组件的 ng-template pTemplate="item" 来实现此目的，只需修改 p-autocomplete 如下：

<p-autoComplete  
     [suggestions]="dataCmpnyAutoList" 
    (completeMethod)="....."
    >
    
          <ng-template let-item pTemplate="item">
            <div
              class="surface-overlay w-9 overflow-hidden text-overflow-ellipsis"
            >
            <span>{{ item.name | uppercase }}-{{item.id}}</span>
            </div>
          </ng-template>
    </p-autoComplete>

还有你的 ts 文件

 startSearch(name: any) {
 let Type = 0

this.pagesService.getCompanyAutoCmpList(Type, name).subscribe((results) {

    this.dataCmpnyAutoList = results?.success
  

}

} [1]：https://www.primefaces.org/primeng/autocomplete