Javascript 从子组件（角度）发出selectAll和unSelectAll事件后，在父组件中获取结果

您好，我现在正在使用ng-multiselect-dropdown（）创建一个多选下拉列表

我通过事件发射器使用父子组件通信： 在child.component.ts中：

import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
import {IDropdownSettings} from 'ng-multiselect-dropdown';

export interface IMultiDropdownConfig {
  placeholder: string;
  header: string;
  dropdownSettings: IDropdownSettings;
}

@Component({
  selector: 'app-multi-dropdown',
  templateUrl: './multi-dropdown.component.html',
  styleUrls: ['./multi-dropdown.component.scss']
})
export class MultiDropdownComponent implements OnInit {

  @Input() dropdownItems: any[];

  @Input() selectedItems;

  @Input() header: string;

  @Input() placeholder: string;

  @Input() dropdownSettings: IDropdownSettings;

  @Input() loading;

  @Output() itemSelectEvent = new EventEmitter();

  @Output() itemDeselectEvent = new EventEmitter();

  @Output() selectAllEvent = new EventEmitter();

  @Output() deselectAllEvent = new EventEmitter();

  @Output() selectedItemsChange = new EventEmitter();

  constructor() { }

  ngOnInit(): void {
  }

  onSelectItem(event) {
    this.selectedItemsChange.emit(this.selectedItems);
  }
  onDeselectItem(event) {
    this.selectedItemsChange.emit(this.selectedItems);
  }
  onSelectAll(event) {
    this.selectedItemsChange.emit(this.selectedItems);
  }

  onDeselectAll(event) {
    this.selectedItemsChange.emit(this.selectedItems);
  }
}

在child.component.html中：

<div class="multi-dropdown-item">
  <div class="multi-dropdown-header">{{header}}</div>
  <div *ngIf="!this.loading" class="multi-dropdown-body">
    <ng-multiselect-dropdown
      [placeholder]="placeholder"
      [data]="dropdownItems"
      [(ngModel)]="selectedItems"
      [settings]="dropdownSettings"
      (onSelect)="onSelectItem($event)"
      (onDeSelect)="onDeselectItem($event)"
      (onSelectAll)="onSelectAll($event)"
      (onDeSelectAll)="onDeselectAll($event)">
    </ng-multiselect-dropdown>
  </div>
</div>

          <app-multi-dropdown
            [loading]="filterPropertiesMap.get(filterEntry).loading"
            [dropdownItems]="filterPropertiesMap.get(filterEntry).items"
            [(selectedItems)]="filterPropertiesMap.get(filterEntry).selectedItems"
            [dropdownSettings]="filterPropertiesMap.get(filterEntry).setting"
            [placeholder]="filterPropertiesMap.get(filterEntry).name"
            [header]="filterPropertiesMap.get(filterEntry).name"
            (itemSelectEvent)="onItemSelect($event)"
            (itemDeselectEvent)="onItemDeselect($event)"
            (selectAllEvent)="onSelectAll($event)"
            (deselectAllEvent)="onDeselectAll($event)"

          ></app-multi-dropdown>

在上面的代码中，filterPropertiesMap定义了设置。 您可能会看到，我所做的是在子组件中，我为select、deselect创建了eventemitter，并在函数I emit

this.selectedItems

中创建了eventemitter

但我不认为这是一个很好的方法来实现这一点，事实上，它并不奏效。 有时，当我选择或取消选择时，它不会立即改变

那么如何实现这一点呢？当我选择取消选择时，选择全部，取消全部。我的父组件可以立即正确反应。

奇怪的是：当我加载页面时，我会选择一些默认值，例如6,7,8,9。然后我选择全部，它仍然是6,7,8,9。然后在我再次取消全选之后，在全选中，字段将变为全选（例如1,2,3,4,5,6,7,8,9）事件发射器是否有延迟或将忽略某些选择？？

编辑：

我试图在此处提取构建项目所需的所有代码片段：

我希望当我打开时，所有事件（选择、取消选择、选择全部、取消全部）都可以由父组件发出和接收

---

抱歉，有一个错误：父组件中的应用程序多下拉标签应该是应用程序子组件

您可以将其用作角度反应形式的一部分，并且每次其值更改时都会发出

子组件的HTML可以是这样的：

<form [formGroup]="myForm">
    <ng-multiselect-dropdown
        name="dropdownItems"
        [settings]="dropdownSettings"
        [placeholder]="placeholder"
        [data]="dropdownItems"
        formControlName="dropdownItems">
   </ng-multiselect-dropdown>
</form>

编辑：基于上次更新：

使用您更新的代码和我的代码和平，我构建了这个运行在stackblitz上的功能项目：

---

希望我的逻辑正确

您没有正确设置发射器。这样做：

@Output()selectAllEvent = new EventEmitter<any>();

onSelectAll(event) {
  this.selectAllEvent.emit(this.selectedItems);
}

@Output（）selectAllEvent=neweventemitter（）；
onSelectAll（活动）{
this.selectAllEvent.emit（this.selectedItems）；
}

然后在家长身上：

<app-multi-dropdown
   (selectAllEvent)="onSelectAll($event)"
></app-multi-dropdown>

请看一下我的编辑，我举了一个有效的例子。您好，非常感谢您的回答，我正在尝试。但我想问一个问题，在我上传的代码中，为什么我选择“全选”并点击按钮，为什么它不工作？你的代码看起来不错。。。这个问题似乎与某个人的报告有关：“SelectAll和DecelectAll选项不更新随ngModel传递的参数”，这是您的情况。

@Output()selectAllEvent = new EventEmitter<any>();

onSelectAll(event) {
  this.selectAllEvent.emit(this.selectedItems);
}

<app-multi-dropdown
   (selectAllEvent)="onSelectAll($event)"
></app-multi-dropdown>