Угловой 5 нг-выберите, как добавить два значения в "bindLabel"?

Я хочу иметь ng-select с двумя значениями в свойстве bindLabel. У меня есть что-то вроде этого:

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

Как этого добиться?

Источник

6 ответов

Решение

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; });
Источник

Его можно отобразить с помощью настраиваемой метки и шаблона элемента:

<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>
Источник 
<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>
Источник

Если вы хотите вернуть пользовательское значение, самый простой способ сделать это - определить 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
    }
});
Источник

Я знаю, что это старый, но вот немного общий компонент (можно легко расширить до полностью универсального), который позволяет выполнять поиск по нескольким полям.
Ссылка на 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"
      }
    ];
  }
}
Источник

У меня была похожая проблема: мне нужен был двойной фильтр, в котором число фильтровалось по «коду», а текст — по «описанию». И я хотел показать на этикетке «код-описание». Решением для отображения значения было использование шаблона ng (как в ответе с более высоким баллом) и использование переменной в качестве значения bindLabel:

            bindLabel="{{ type }}"

Итак, внутри .ts я бы:

      if (shouldBeCode) {
    this.type = 'code'
} else {
    this.type = 'description'
}

В моем случае это if находится внутри пользовательской функции поиска:

      <ng-select
    [items]="filteredList"
    (search)="filter($event)"
    bindLabel="{{ type }}"
    ...
>
Источник
Другие вопросы по тегам