angular2-multiselect-dropdown, показывающий id и itemName в раскрывающемся списке

Question

Я использую angular2-multiselect-dropdown для привязки значений с сервера

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

вот мой код HTMl

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

В выпадающем меню я получаю id и itemName. Пожалуйста, найдите приведенный ниже скриншот. Я не понимаю, где я делаю неправильно.

Answer 1

Я решил эту проблему с помощью шаблонов управляемых форм.

<angular2-multiselect [data]="PayerDummyObjType" [(ngModel)]="PayerDummyObjTypeSelected" [settings]="dropdownSettings">
<c-item>
        <ng-template let-item="item">
          <label style="color: #333;min-width: 150px;font-weight: 500">{{item.itemName}}</label> 
        </ng-template>
</c-item>