I am currently utilizing the angular2-multiselect-dropdown to connect with server values.
interface PayerDummyObjType{
id: string;
itemName: string;
}
PayerDummyObjType: PayerDummyObjType[];
PayerDummyObjTypeSelected: PayerDummyObjType[];
dropdownSettings = {};
this.http.getPBMPayerDetails().subscribe((data: FilterDetails[]) => {
this.dropdownSettings = {
singleSelection: false,
text: "Select Payer",
selectAllText: 'Select All',
unSelectAllText: 'UnSelect All',
enableSearchFilter: true,
classes: "myclass custom-class-example",
badgeShowLimit: 2,
lazyLoading: true,
labelKey: 'itemName',
primaryKey: 'id',
maxHeight: '200'
};
this.PayerDummyObjType = [];
data.forEach(x => {
this.PayerDummyObjType.push({
id:x.FILTER_VALUES, itemName:x.DISPLAY_NM
});
});
Below is my HTML code snippet:
<angular2-multiselect [data]="PayerDummyObjType" [(ngModel)]="PayerDummyObjTypeSelected"
[settings]="dropdownSettings" (onSelect)="onItemSelect($event)" (onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)" (onOpen)="onOpen($event)"
(onClose)="onClose($event)" (clickOutside)="onClose($event)">
</angular2-multiselect>
I am facing an issue where both id and itemName are displayed in the dropdown. Attached below is a screenshot for reference. Any assistance on identifying the error would be much appreciated.