[英]Multiple field for AutoComplete box (primeng 4.2.0 and Angular 4)
How do i display multiple field within a primeng auto complete box. 如何在primeng自动完成框中显示多个字段。
for example: 例如:
<p-autoComplete [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name,lastname"></p-autoComplete>
or
<p-autoComplete [(ngModel)]="val" [suggestions]="results" (completeMethod)="search($event)" field="name+' '+lastname"></p-autoComplete>
But this does not work.When ever i pass 2 values within a field property as shown above, it does not display any value in the user interface, where as for a single value it works perfectly fine 但是这不起作用。当我在一个字段属性中传递2个值时,如上所示,它不会在用户界面中显示任何值,对于单个值,它可以完美地工作
(example:-field="name")
(例如:-field = “名称”)
. 。
I think it isn't possible at this moment: https://github.com/primefaces/primeng/issues/1202 我认为现在不可能: https : //github.com/primefaces/primeng/issues/1202
But you can bypass the problem adding a calculated field to your object 但是您可以绕过向对象添加计算字段的问题
For example, your class user: 例如,您的班级用户:
class User {
name : string; lastname : string;
description : string;
}
You method (completeMethod) would be: 你的方法(completeMethod)将是:
f(like : string) {
...
users.forEach(_ => { description = lastname + ", " + name} );
...
}
And your html template 和你的HTML模板
<p-autocomplete field="description" ...>
<ng-template let-users pTemplate="item">
<div class="ui-helper-clearfix">
{{user.name}}, {{user.lastname}}</div>
</div>
</ng-template>
</p-autocomplete>
Or better, you can create a AutocompleteUser object: 或者更好的是,您可以创建一个AutocompleteUser对象:
class AutocompleteUser {
user : User;
description : string;
constructor(user : User) {
this.user = user;
description = ...;
}
}
In your (completeMethod), 在你的(completeMethod)中,
completeMethod(like : string) : void {
this.service.getUsers()
.subscribe((users: User[]) => {
this.autocompleteUsers = users.map((_ : User) => new AutocompleteUser(_) );
});
}
An then in the template: 然后在模板中:
[suggestions]="autocompleteUsers"
I guess you could use Templating to do this. 我想你可以使用Templating来做到这一点。 See https://www.primefaces.org/primeng/#/autocomplete
请参阅https://www.primefaces.org/primeng/#/autocomplete
<p-autoComplete [(ngModel)]="user" >
<ng-template let-user pTemplate="item">
<div class="ui-helper-clearfix">
{{user.name}}, {{user.lastname}}</div>
</div>
</ng-template>
</p-autoComplete>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.