Question

我想在属性bindLabel中使用带有两个值的ng-select。我有这样的东西：

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

 </ng-select>

但是在 bind标签中，我要具有 bindLabel = 名字和姓氏。像这样：

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

 </ng-select>

如何实现？

Answer 1

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 2

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

我知道这是一个古老的组件，但这是一个通用组件（可以很容易地扩展为完全通用），可以通过多个字段进行搜索。
StackBlitz link
完整组件：

@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"
      }
    ];
  }
}

Answer 4

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-xs-6">
  <select class="form-control" name="select1" id="select1">
    <option data-size="1">Fruit</option>
    <option data-size="2">Animal</option>
    <option data-size="3">Bird</option>
    <option data-size="4">Car</option>
  </select>
</div>
<div class="col-xs-6">
  <select class="form-control" name="select2" id="select2">
    <option data-size="1">Banana</option>
    <option data-size="1">Apple</option>
    <option data-size="1">Orange</option>
    <option data-size="2">Wolf</option>
    <option data-size="2">Fox</option>
    <option data-size="2">Bear</option>
    <option data-size="3">Eagle</option>
    <option data-size="3">Hawk</option>
    <option data-size="4">BWM
      <option>
  </select>
</div>

Answer 5

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

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

5 个答案: