我正在关注以下链接: multiselectDropdown。
此处提供的演示正在运行,但就我而言,当我评论延迟加载方法搜索时,效果很好,但是如果我启用了它不进行搜索。
这是我的代码HTML
:
<angular2-multiselect
[data]="arrDeviceGroups"
[(ngModel)]="arrSelectedDeviceGroups"
[settings]="groupSettings"
(onScrollToEnd)="loadMoreDeviceGroupsList($event)"
(onSelect)="onGroupSelect($event)">
<c-item>
<ng-template let-item="item">
<label style="color: #333;">{{item.itemName}}</label>
</ng-template>
</c-item>
</angular2-multiselect>
和.ts
文件代码:
this.groupSettings = {
text: "Select Device groups",
classes: "myclass custom-class",
singleSelection: true,
enableSearchFilter: true,
lazyLoading: true,
closeDropDownOnSelection: true,
searchBy: ['itemName'],
labelKey: 'itemName'
};
getAllDeviceGroups() {
this.dialogService.showLoader();
this.deviceGroupService.getAllDeviceGroups(this.appEngineService.selectedSalesforceId, 1).then(deviceGroupsList => {
this.parseDeviceGroups(deviceGroupsList['Items']);
this.deviceGroupsLastEvalutionKey = deviceGroupsList["LastEvaluatedKey"];
this.dialogService.dismissLoader();
}, error => {
console.log(this.LOGTAG, "loadMoreCognitoUser() error :", error);
this.dialogService.dismissLoader();
this.dialogService.showErrorToast(error);
});
}
parseDeviceGroups(deviceGroupList) {
for (const data of deviceGroupList) {
this.arrDeviceGroups.push({ id: data['id'], 'name': data['name'], itemName: data['name'], 'devices': data['devices'], 'isGroup': 1 });
}
}
loadMoreDeviceGroupsList(event: any) {
if ((event.end === this.arrDeviceGroups.length - 1) && this.deviceGroupsLastEvalutionKey) {
this.dialogService.showLoader();
this.deviceGroupService.getAllDeviceGroups(this.appEngineService.selectedSalesforceId, 1, this.deviceGroupsLastEvalutionKey).then(deviceGroupsList => {
this.parseDeviceGroups(deviceGroupsList['Items']);
this.deviceGroupsLastEvalutionKey = deviceGroupsList["LastEvaluatedKey"];
this.dialogService.dismissLoader();
}, error => {
console.log(this.LOGTAG, "loadMoreCognitoUser() error :", error);
this.dialogService.dismissLoader();
this.dialogService.showErrorToast(error);
});
}
}