[英]Angular 5 ng-select how to add two values to 'bindLabel'?
I want to have ng-select with two values in property bindLabel.我想在属性 bindLabel 中有两个值的 ng-select。 I have something like this:
我有这样的事情:
<ng-select placeholder="{{'TASKS.FOR_WHO' | translate }}"
name="users" [items]="users" bindLabel="firstName" >
</ng-select>
But in bind label i want to have bindLabel= firstName + lastName.但是在绑定标签中,我想要bindLabel= firstName + lastName。 Like this:
像这样:
<ng-select placeholder="{{'TASKS.FOR_WHO' | translate }}"
name="users" [items]="users" bindLabel="firstName+lastName">
</ng-select>
How to achieve this?如何实现这一目标?
It is possible to display it via a custom label and item template:可以通过自定义标签和项目模板显示它:
<ng-select [items]="users" bindLabel="firstName">
<ng-template ng-label-tmp let-item="item">
<span >{{ item.firstName + ' ' + item.lastName }}</span>
</ng-template>
<ng-template ng-option-tmp let-item="item" let-search="searchTerm" let-index="index">
<span >{{ item.firstName + ' ' + item.lastName }}</span>
</ng-template>
</ng-select>
ng-select only accepts a string value in the attribute. ng-select 只接受属性中的字符串值。 I may be misunderstanding but I believe that if you say
bindLabel="firstName+lastName"
, ng-select is attempting to reference item[firstNamelastName]
which does not exist.我可能会误解,但我相信如果你说
bindLabel="firstName+lastName"
, ng-select 正在尝试引用不存在的item[firstNamelastName]
。
I think your best option is to transform the collection.我认为你最好的选择是转换集合。 You can add a .map to the end of your array declaration and use
bindLabel="fullName"
in your template:您可以在数组声明的末尾添加一个 .map 并在模板中使用
bindLabel="fullName"
:
[
{firstName: "John", lastName: "Doe"},
{firstName: "Jane", lastName: "Doe"}
].map((i) => { i.fullName = i.firstName + ' ' + i.lastName; return i; });
<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>
If you want to return custom value , the easiest way to do is to define bindLabel="fullName"
and return value from component, for example:如果要返回自定义值,最简单的方法是定义
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
}
});
I know this is an old one, but here's a bit generic component (can be easily extended to be fully generic) that allows search by multiple fields.我知道这是一个旧的,但这里有一个通用组件(可以轻松扩展为完全通用),允许按多个字段进行搜索。
StackBlitz link StackBlitz 链接
Full component:完整组件:
@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);
}
}
usage:用法:
@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"
}
];
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.