Angular PrimeNG 自动完成 : Displaying multiple fields?

Question

假设我们有这样的场景:

<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>

与 Controller :

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？

Answer 1

您可以将 label 属性添加到您的 Vehicle 对象，然后用该对象的其他字段的串联填充它。

类似于:

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

然后，将 field="make" 替换为 field="label" 应该就可以了。