angular - angular2-multiselect-dropdown 在下拉列表中显示 id 和 itemName
问题描述
我正在使用 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。请找到下面附加的屏幕截图。我没有得到我做错的地方。
解决方案
我已经通过使用模板驱动表单解决了这个问题。
<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>
推荐阅读
- java - 如何使用 MQTT 从 Swing Java 应用程序向服务器发送/接收数据
- javascript - onClientClick return Function() 仍然会触发 OnClick
- javascript - 将jsp变量传递给javascript
- java - 如何从 textarea 获取文本并将其作为 URL 的参数发送
- terminal - 如何在特定窗格中使用特定命令启动 Iterm?
- svg.js - 修改多边形 svg.js 的坐标
- angular - 由于“CORB”问题,无法从“跨域”获取数据
- json - 循环中的 JSON 键和 bash 变量
- php - SSH2.php 有没有办法增加服务器响应的时间?
- sharepoint - Microsoft Graph API - 最近的文档不刷新