Angular PrimeNG 自动完成：显示多个字段？

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>

带控制器：

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" 应该就可以了。

Angular PrimeNG 自动完成：显示多个字段？

Angular PrimeNG Autocomplete: Displaying multiple fields?

angular

typescript

autocomplete

angular5

primeng