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

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

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

工作堆栈闪电战

Answer 2

图书馆也有同样的问题。你不能那样做。在这里阅读。我在下面复制了解决方法。

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

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

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

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