web-dev-qa-db-ja.com

Angular 5 ng-'bindLabel 'に2つの値を追加する方法を選択しますか？

BindLabelプロパティに2つの値を持つng-selectが必要です。私はこのようなものを持っています：

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

 </ng-select>

しかしbind labelでbindLabel = firstName + lastNameにしたいです。このような：

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

 </ng-select>

これを達成する方法は？

angularangular-ngselect
7
Kacper Kapela

ng-selectは、属性の文字列値のみを受け入れます。誤解しているかもしれませんが、bindLabel="firstName+lastName"と言うと、ng-selectは存在しないitem[firstNamelastName]を参照しようとしていると思います。

コレクションを変換するのが最善の選択肢だと思います。配列宣言の最後に.mapを追加し、テンプレートでbindLabel="fullName"を使用できます。

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

カスタムラベルとアイテムテンプレートを使用して表示することができます。

<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

カスタム値を返したい場合、最も簡単な方法はbindLabel="fullName"およびコンポーネントからの戻り値、たとえば：

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