Question

如何在primeng自动完成框中显示多个字段。

例如：

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

但是这不起作用。当我在一个字段属性中传递2个值时，如上所示，它不会在用户界面中显示任何值，而单个值则完全正常工作

（例如：-field =＆＃34;名称＆＃34）

Answer 1

我想您可以使用“模板化”来做到这一点。参见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>

Answer 2

我认为目前不可能：https://github.com/primefaces/primeng/issues/1202

但是您可以绕过将计算字段添加到对象的问题

例如，您的班级用户：

class User {
  name : string; lastname : string;
  description : string;
}

您的方法（completeMethod）为：

f(like : string) {
  ...
  users.forEach(_ => { description = lastname + ", " + name} );
  ...
}

还有您的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>

或者更好的是，您可以创建一个AutocompleteUser对象：

class AutocompleteUser {
  user : User;
  description : string;
  constructor(user : User) {
    this.user = user;
    description = ...;
  }
}

在您的（completeMethod）中，

completeMethod(like : string) : void {
  this.service.getUsers()
  .subscribe((users: User[]) => {
    this.autocompleteUsers = users.map((_ : User) => new AutocompleteUser(_) );
  });
}

然后在模板中：

[suggestions]="autocompleteUsers"

AutoComplete框的多个字段（primeng 4.2.0和Angular 4）

2 个答案: