我有一个选择下拉菜单和多选下拉菜单。两者都具有动态价值。
我正在做的是我点击编辑按钮它显示模态内部模态有模块的选择下拉菜单和多选动作。
我动态选择模块名称它完美地工作但依赖多选不起作用。我认为单选不会触发改变事件。
HTML:
<div class="col-md-12">
<label for="module">Select Module</label>
<select class="form-control" (change)="onChangeModuleDD($event)" name="moduleSelection" required>
<option value="">-- Select Module --</option>
<option *ngFor="let module of allModuleData" [value]="module | json" [selected]="module.name == usermodule">{{
module.name
}}</option>
</select>
</div>
<div class="col-md-12">
<label for="actions">Select Actions/Charts</label>
<ng-multiselect-dropdown [placeholder]="'-- Select Action/Charts --'" [data]="dropdownList" [settings]="dropdownSettings"
(onSelect)="onItemSelect($event)" name="actionSelection" (onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)" (onDeSelectAll)="onDeSelectAll($event)">
</ng-multiselect-dropdown>
</div>
零件:
onChangeModuleDD(event) {
this.selectedItems = [] // empty selected action array
this.dropdownList = []
let value = event.target.value
if (value) {
let parsedValue = JSON.parse(value)
this.usermodule = parsedValue.name
if (parsedValue.hasCRUD == 0) {
this.userListingApi.fetchAllDashboardAction().subscribe(res => {
this.dropdownList = []
for (let i = 0; i < res['data'].length; i++) {
this.dropdownList.push(res['data'][i])
}
})
} else {
this.userListingApi.fetchAllCRUDAction().subscribe(res => {
this.dropdownList = []
for (let i = 0; i < res['data'].length; i++) {
this.dropdownList.push(res['data'][i])
}
})
}
} else {
console.log('Nothing to display')
}
}
在插入时它完美地工作但是当我动态选择时它不起作用。
编辑:
onItemSelect(item: any) {
this.selectedItems.push(item)
}
OnItemDeSelect(items: any) {
var id = items._id
this.selectedItems = this.selectedItems.filter((item) => item['_id'] !== id);
}
onDeSelectAll(items: any) {
this.selectedItems = items
}
在你的组件中我看不到onItemSelect($ event),OnItemDeSelect($ event)和其他多选方法绑定到该事件。
检查此链接:https://www.npmjs.com/package/ng-multiselect-dropdown
在组件中添加此项并尝试:
onItemSelect(item: any) {
console.log(item);
}
不确定它是否应该起作用。请看这个问题:https://github.com/NileshPatel17/ng-multiselect-dropdown/issues/5。
重新加载[data]
后可能会删除事件(请参阅我的评论)。