ngx-select-dropdown set 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， firastName， lastName， age( 数组/对象。
• 创建新的自定义属性为 ： Person 对象的名称，并将值设置为 ：firstName + lastName
• 使用 Person ( (id， firastName， lastName， name， age( array/object 和 dispayKey 作为 ： name

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

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