angular - 自动完成框的多个字段（primeng 4.2.0 和 Angular 4）

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="name"）

.

Answer 1

I guess you could use Templating to do this. See 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(like : string) : void {
  this.service.getUsers()
  .subscribe((users: User[]) => {
    this.autocompleteUsers = users.map((_ : User) => new AutocompleteUser(_) );
  });
}

然后在模板中：

[suggestions]="autocompleteUsers"