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

【问题标题】：ngx-select-dropdown set displayKey with multiple valuesngx-select-dropdown 设置具有多个值的 displayKey
【发布时间】：2020-04-03 05:54:34
【问题描述】：

我正在使用带有搜索功能的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 的多个值？此外，需要对该下拉菜单进行验证。

【问题讨论】：

能否也提供模板代码？
@Plochie 添加了html 代码
所以目前allUserData 是字符串数组，对吗？
@Plochie 是的，正确！
我有一个疑问，displayKey 的多个值是什么意思？如果您的数据是复杂类型，则使用displayKey。所以如果你的allUserData 是allUserData = [ { firstName: 'val1'} ]，那么在下拉列表中你会看到val1。能否请您详细说明。

标签： angular typescript dropdownbox ngx-select-dropdown

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

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

通过添加新密钥实现合并。您可以遍历数组/对象。例如。

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

【讨论】：

你能给我举个自定义对象的例子吗？
我不知道如何做到这一点，如果您提供示例代码会有所帮助。