Question

我有一个单选下拉列表和多选下拉列表。两者都有动态价值。

我正在做的是我在单击编辑按钮，它显示了模态内部的模态，其中有模块的选择下拉列表和多个操作选择。

我正在动态选择模块名称，它可以正常工作，但是依赖的多重选择不起作用。我认为单选不会触发更改事件。

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
  }

Answer 1

在您的组件中，我看不到onItemSelect（$ event），OnItemDeSelect（$ event）和其他多重选择方法绑定到该事件。

检查此链接： https://www.npmjs.com/package/ng-multiselect-dropdown

将此添加到您的组件中，然后尝试：

 onItemSelect(item: any) {
 console.log(item);
 }

Answer 2

不确定它是否应该工作。请查看以下问题：https://github.com/NileshPatel17/ng-multiselect-dropdown/issues/5。

重新加载[data]后，事件可能会被清除（请参阅我的评论）。

Angular 7设置选定值未触发更改事件

2 个答案: