Несколько полей для поля автозаполнения (primeng 4.2.0 и Angular 4)

Как отобразить несколько полей в поле автозаполнения 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 значения в свойстве поля, как показано выше, оно не отображает никакого значения в пользовательском интерфейсе, тогда как для одного значения оно работает отлично.

(пример:-поле="имя")

.


angular primeng primeng-dropdowns primeng-datatable angular4-forms
person Dipin raman    schedule 27.10.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я думаю, вы могли бы использовать шаблоны, чтобы сделать это. См. 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>
person Johannes Klapwijk    schedule 19.09.2018

arrow_upward
1
arrow_downward

Я думаю, что в данный момент это невозможно: 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"
person user721730    schedule 27.07.2019