时间戳

首页 > 解决方案 > Angular 7设置选定值不触发更改事件

angular7 - Angular 7设置选定值不触发更改事件

问题描述

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

我正在做的是我单击编辑按钮，它在模态内部显示模态，有模块的选择下拉菜单和动作的多选。

我正在动态选择模块名称，它运行良好，但依赖多选不起作用。我认为单选不会触发更改事件。

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
  }

标签： angular7

解决方案

在您的组件中，我看不到 onItemSelect($event)、OnItemDeSelect($event) 和其他多选方法绑定到事件。

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

将此添加到您的组件中并尝试：

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

推荐阅读