angular - PrimeNG - 带有数据表的自动完成字段以获取建议

Question

我正在尝试将 PrimeNG 自动完成字段中的建议显示在带有标题的表格中。

最大的事情是只显示第一行的表格标题，并可能消除表格之间的填充。我也希望有一种更优化的方法来处理这个问题，因为现在每个建议都包含在自己的表格中，而且我可以看到在下拉列表中显示大量建议的成本很高。

<p-autoComplete [style]="{'width':'100%'}" [inputStyle]="{'width':'100%'}" 
    [(ngModel)]="customer" [suggestions]="customerResults" 
    (completeMethod)="searchCustomers($event)" field="name">
  <ng-template let-value let-i="index" pTemplate="item">
    <p-dataTable [value]="customerResults.slice(i, i+1)">
      <p-headerColumnGroup *ngIf="i === 0">
         <p-row>
           <p-column header="Id"></p-column>
           <p-column header="Name"></p-column>
         </p-row>
       </p-headerColumnGroup>
       <p-column field="id"></p-column>
       <p-column field="name"></p-column>
     </p-dataTable>
  </ng-template>
</p-autoComplete>

普朗克