web-dev-qa-db-fra.com

Angular 5 ng-select comment ajouter deux valeurs à 'bindLabel'?

Je veux avoir ng-select avec deux valeurs dans la propriété bindLabel. J'ai quelque chose comme ça:

<ng-select placeholder="{{'TASKS.FOR_WHO' | translate }}"
                           name="users"  [items]="users" bindLabel="firstName" >

 </ng-select>

Mais dans bind label je veux avoir bindLabel = firstName + lastName. Comme ça:

<ng-select placeholder="{{'TASKS.FOR_WHO' | translate }}"
                           name="users"  [items]="users" bindLabel="firstName+lastName">

 </ng-select>

Comment y parvenir?

angularangular-ngselect
7
Kacper Kapela

ng-select accepte uniquement une valeur de chaîne dans l'attribut. Je peux me méprendre, mais je crois que si vous dites bindLabel="firstName+lastName", ng-select tente de référencer item[firstNamelastName] qui n'existe pas.

Je pense que votre meilleure option est de transformer la collection. Vous pouvez ajouter un .map à la fin de votre déclaration de tableau et utiliser bindLabel="fullName" dans votre modèle:

[
  {firstName: "John", lastName: "Doe"},
  {firstName: "Jane", lastName: "Doe"}
].map((i) => { i.fullName = i.firstName + ' ' + i.lastName; return i; });
7
Kevin

Il est possible de l'afficher via un modèle d'étiquette et d'élément personnalisé:

<ng-select [items]="users" bindLabel="firstName"> 

  <ng-template ng-label-tmp let-item="item">
      <span >{{ item.firstName + ' ' + item.lastName }}</span>
  </ng-template>
  <ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
        <span >{{ item.firstName + ' ' + item.lastName }}</span>
  </ng-template>

</ng-select>
5
michal.jakubeczy

Si vous souhaitez renvoyer une valeur personnalisée, la méthode la plus simple consiste à définir bindLabel="fullName" et renvoie la valeur du composant, par exemple:

this.adaptedLoans = this.adaptedLoans.map(item => {
                      return {
                         "id": item.customer.id,
                         "name": item.customer.name,
                         "creditLimit": item.creditLimit,
                         "creditor": item.creditor,
                         "fullName": item.creditLimit + ' ' + 'CHF' + ' ' + this.translate.instant('filter_at') + ' ' + item.customer.name
                    }
                 });
0
Mile Mijatovic