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>