Angular PrimeNG 自动完成:显示多个字段?
Angular PrimeNG Autocomplete: Displaying multiple fields?
假设我们有这样的场景:
<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
?
您可以将 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"
应该就可以了。
假设我们有这样的场景:
<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
?
您可以将 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"
应该就可以了。