自动完成 primeNG。显示多个属性

Question

我正在使用 ng-prime 的自动完成功能和一个对象“Employee”，该对象内部有“Person”，内部有“name”、“surname 1”和“surname 2”

 <p-autoComplete [(ngModel)]="empleado" [suggestions]="filteredEmpleadosSingle" (completeMethod)="filterEmpleadoSingle($event)"
            field="persona.nombre" [minLength]="3" [forceSelection]="true">
            <ng-template let-empleado pTemplate="item">
                <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
                    <div style="font-size:18px;float:left;margin:10px 10px 0 0">{{empleado.persona.nombre}} {{empleado.persona.apellido1}} {{empleado.persona.apellido2}}</div>
                </div>
            </ng-template>
 </p-autoComplete>

在建议中，如果我得到了这个名字，就会与两个姓氏一起跳跃。

当我特别选择一个时，它只显示输入中的名称。

属性“field = person.name”仅支持一个属性，我需要将三个属性全部放入

我该怎么做，以便当我选择自动完成的项目时，它会显示我的姓名、姓氏1和姓氏2。

“primeng”：“5.2.4”

谢谢你

Answer 1

在多种模式下，可以使用

selectedItem

自定义所选项目

ng-template

。请注意，该模板不支持单 模式。

<p-autoComplete [(ngModel)]="customer" [suggestions]="customerResults" (completeMethod)="searchCustomers($event)" [multiple]="true">
  <ng-template let-customer pTemplate="selectedItem">
    {{customer.name}} {{customer.firstname}}
  </ng-template>
  <ng-template let-customer pTemplate="item">
    {{customer.name}} {{customer.firstname}}
  </ng-template>
</p-autoComplete>

Answer 2

您可以在组件中添加功能，例如：

showAttributes(customer : any): string {
  return `${customer.name} - ${customer.firstname}`;
}

并在 p-Autocomplete 标记中添加 [field]="showAttributes" 如下：

<p-autoComplete [(ngModel)]="customer" [suggestions]="customerResults" (completeMethod)="searchCustomers($event)" [field]="showAttributes">