ngx-select-dropdown 设置具有多个值的 displayKey

Question

我正在使用带有搜索功能的 ngx-select-dropdown，我想设置多个 displayKey 值，例如：firstname 和 lastname。

下面是我的config对象：

dropdownconfig = {
    displayKey: 'firstName, lastName',
    search: true,
    placeholder: 'Select User',
    height: '150px'
};

html:

<ngx-select-dropdown (change)="selecteAdmin($event)" [config]="dropdownconfig" [options]="allUserData" [(ngModel)]="singleSelect" [multiple]="false" ></ngx-select-dropdown>

如何显示 displayKey 的多个值？此外，需要对该下拉菜单进行验证。

Answer 1

同样的问题在图书馆开放。你不能那样做。 Read it here。我在下面复制了解决方法。

您可以使用自定义的属性数组/对象。例如：

假设您有 Person (id, firastName, lastName, age) 数组/对象。
创建新自定义属性为：Person 对象的名称并将值设置为：firstName + lastName
使用 Person ( (id, firastName, lastName, name, age) array/object 和 dispayKey as : name

通过添加新密钥实现合并。您可以遍历 array/object。例如

users.forEach((user) => {
    user.name = user.firstName + user.lastName;
});

Answer 2

在数组对象中创建自定义字段。并将其用作密钥。

dropdownconfig = {
    displayKey: "custom",
    search: true,
    placeholder: "Select User",
    height: "150px"
  };


  allUserData = [
    { firstName: 'first1', lastName: 'last1'}, 
    { firstName: 'first2', lastName: 'last2'},
    { firstName: 'first3', lastName: 'last3'},
    { firstName: 'first4', lastName: 'last4'}
  ]

  ngOnInit() {
    for (let user of this.allUserData) {
      user['custom'] = user.firstName + ' ' + user.lastName;
    }
  }

Working Stackblitz

ngx-select-dropdown 设置具有多个值的 displayKey

ngx-select-dropdown set displayKey with multiple values

dropdownbox

typescript

angular

ngx-select-dropdown