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>