angular - Angular 5 ng-select 如何将两个值添加到'bindLabel'？

Question

我想在属性 bindLabel 中有两个值的 ng-select。我有这样的事情：

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

 </ng-select>

但在绑定标签中，我想要bindLabel= firstName + lastName。像这样：

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

 </ng-select>

如何做到这一点？

Answer 1

可以通过自定义标签和项目模板显示它：

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

Answer 2

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; });

Answer 3

<ng-select [items]="users" bindLabel="firstName"> 
    <ng-template ng-label-tmp let-item="item" let-clear="clear">
        <span class="ng-value-label">{{item.firstName + ' ' + item.lastName}}</span>
        <span class="ng-value-icon right" (click)="clear(item)">×</span>
    </ng-template>
</ng-select>

Answer 4

如果要返回自定义值，最简单的方法是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
    }
});

Answer 5

我知道这是一个旧的，但这里有一个通用组件（可以很容易地扩展为完全通用），它允许通过多个字段进行搜索。
StackBlitz 链接
完整组件：

@Component({
  selector: "app-generic-select",
  template: `
    <ng-select
      [formControl]="control"
      class="select-control"
      id="item-select"
      [items]="adjustedAvailableItems"
      [multiple]="true"
      [closeOnSelect]="false"
      [clearSearchOnAdd]="true"
      [hideSelected]="true"
      bindLabel="searchField"
    >
      <ng-template ng-multi-label-tmp let-items="items" let-clear="clear">
        <div class="ng-value" *ngFor="let item of items">
          <span
            class="ng-value-icon left"
            (click)="clear(item)"
            aria-hidden="true"
            >×</span
          >
          <span class="ng-value-label">{{ getText(item) }}</span>
        </div>
      </ng-template>

      <ng-template ng-option-tmp let-item="item">
        {{ getText(item) }}
      </ng-template>
    </ng-select>
  `
})
export class GenericSelectComponent implements OnChanges {
  @Input() control: FormControl;
  @Input() availableItems: any[];
  @Input() printContent: (item) => string;
  @Input() itemSearchFields: string[];

  adjustedAvailableItems: any[];

  constructor() {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes.itemSearchFields || changes.availableItems) {
      this.adjustedAvailableItems = this.adjustAvailableItems(
        this.availableItems
      );
    }
  }

  private adjustAvailableItems(items: any[]): any[] {
    if (!this.itemSearchFields || !this.itemSearchFields.length) {
      return items;
    }
    return items.map(item => {
      item.searchField = this.itemSearchFields
        .map(searchField => item[searchField])
        .reduce((curr, next) => curr + " " + next);
      return item;
    });
  }

  getText(item: any): string {
    if (!item) {
      return "";
    }
    if (!this.printContent) {
      return item.toString();
    }
    return this.printContent(item);
  }
}

用法：

@Component({
  selector: "my-app",
  template: `
    <app-generic-select
      [availableItems]="availableAccounts"
      [control]="accountControl"
      [itemSearchFields]="['name', 'country']"
      [printContent]="accountText"
    >
    </app-generic-select>
    {{ accountForm.value | json }}
  `
})
export class AppComponent implements OnInit {
  accountForm: FormGroup;

  availableAccounts: Account[] = [];
  delayedObservable = Observable.of(this.getTestAccounts()).delay(3000);

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit(): void {
    this.accountForm = this.formBuilder.group({
      accounts: [[], []]
    });
    this.delayedObservable.subscribe(
      accounts => (this.availableAccounts = accounts)
    );
  }

  get accountControl(): FormControl {
    return this.accountForm.get("accounts") as FormControl;
  }

  accountText = (item: Account): string => {
    return item.name + " - " + item.country;
  };

  getTestAccounts(): Account[] {
    return [
      {
        name: "Adam",
        email: "adam@email.com",
        age: 12,
        country: "United States"
      },
      {
        name: "Samantha",
        email: "samantha@email.com",
        age: 30,
        country: "United States"
      },
      {
        name: "Amalie",
        email: "amalie@email.com",
        age: 12,
        country: "Argentina"
      },
      {
        name: "Estefanía",
        email: "estefania@email.com",
        age: 21,
        country: "Argentina"
      },
      {
        name: "Adrian",
        email: "adrian@email.com",
        age: 21,
        country: "Ecuador"
      },
      {
        name: "Wladimir",
        email: "wladimir@email.com",
        age: 30,
        country: "Ecuador"
      },
      {
        name: "Natasha",
        email: "natasha@email.com",
        age: 54,
        country: "Ecuador"
      },
      {
        name: "Nicole",
        email: "nicole@email.com",
        age: 43,
        country: "Colombia"
      },
      {
        name: "Michael",
        email: "michael@email.com",
        age: 15,
        country: "Colombia"
      },
      {
        name: "Nicolás",
        email: "nicole@email.com",
        age: 43,
        country: "Colombia"
      }
    ];
  }
}