typescript - Angular PrimeNG 自動完成：顯示多個欄位？

假設我們有這種情況：

<p-autoComplete dataKey="id" field="make" emptyMessage="{{'NoDataFound' | translate}}"
    [delay]="0" [suggestions]="vehicles" [minLength]="0" appendTo="body"
    (completeMethod)="searchVehicles($event)" (onSelect)="on($event)">
    <ng-template let-vehicle pTemplate="item">
      {{vehicle.make}} {{vehicle.model}}
    </ng-template>
</p-autoComplete>

使用控制器：

export class AutoCompleteDemo {

    selectedVehicle: Vehicle;

    vehicles: Vehicle[];

    searchVehicles(event) {
        this.vehiclelookupservice.getResults(event.query).then(data => {
            this.vehicles= data;
        });
    }
}

而 Vehicle 物件的結構為：

{
    id: int,
    make: string,
    model: string
}

field 屬性用於顯示所選對象的屬性（在此例中為 make）。我如何顯示所選對象以顯示 make + " " + vehicle？

答案＃1

你可以在你的 Vehicle 對象中添加一個 label 屬性，然後用該對象其他欄位的拼接來填充它。

類似這樣：

this.vehiclelookupservice.getResults(event.query).then(data => {
    this.vehicles = data;
    this.vehicles.foreach(item => item.label = item.make + " " + item.vehicle);
});

然後，將 field="make" 替換為 field="label" 應該就能解決問題。