我想让ng在属性bindLabel中选择两个值
我有这样的东西：
<ng-select placeholder="{{'TASKS.FOR_WHO' | translate }}"
name="users"
[items]="users"
bindLabel="firstName" >
</ng-select>
但在绑定标签中，我希望使用bindLabel=firstName+lastName。像这样：
<ng-select placeholder="{{'TASKS.FOR_WHO' | translate }}"
name="users"
[items]="users"
bindLabel="firstName + lastName">
</ng-select>
如何做到这一点？
可以通过自定义标签和项目模板显示：
<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只接受属性中的字符串值。我可能有误解，但我相信如果你说bindLabel="firstName+lastName"，ng select是在试图引用不存在的item[firstNamelastName]。
我认为你最好的选择是改造这个系列。您可以在数组声明的末尾添加.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>
如果要返回自定义值，最简单的方法是定义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
}
});
我知道这是一个旧组件，但这里有一个有点通用的组件(可以很容易地扩展为完全通用(，允许通过多个字段进行搜索
StackBlitz链接
完整组件：
@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);
}
}
用法：
@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"
}
];
}
}