时间戳

首页 > 解决方案 > 自动完成primingNG。显示多个属性

primeng - 自动完成primingNG。显示多个属性

问题描述

我正在使用 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”

谢谢

标签： primeng

解决方案

在多模式下，可以使用 自定义所选项目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>

推荐阅读