在子組件（Angular）發出 selectAll 和 unSelectAll 事件后在父組件中獲取結果

Question

嗨，我現在正在研究 angular 以使用 ng-multiselect-dropdown（ https://www.npmjs.com/package/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>

然后在 parent.component.html 中：

          <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>

在 parent.component.ts 我什么也沒做，只記錄：

  onItemSelect($event) {
    console.log("onItemSelect");

  }
  onItemDeselect($event) {
    console.log("onItemDeselect");

  }

  onSelectAll($event) {
    console.log("onSelectAll");

  }

  onDeselectAll($event) {
    console.log("onDeselectAll");

  }

在上面的代碼中filterPropertiesMap定義了設置。 您可能會看到我正在做的是在子組件中，我為 select 創建了事件發射器，取消選擇，並在 function 中發出了this.selectedItems 。

但我不認為這是實現這一點的好方法，實際上，它也不能很好地工作。 有時，當我 select 或取消選擇時，它不會立即改變。

那么如何實現呢？ 當我 select 取消選擇，全選，全取消。 我的父組件可以立即正確地做出反應。

奇怪的是：當我加載頁面時，我會選擇一些默認值，例如 6、7、8、9。 然后我 select 全部還是 6,7,8,9。 然后我取消選擇所有 agin select all，該字段將更改為全部（例如 1、2、3、4、5、6、7、8、9）。 事件發射器是否有延遲或會忽略某些選擇？

編輯：

我試圖提取所有必要的代碼片段來在這里構建一個項目： https://drive.google.com/file/d/1BlV2EtdwZhqqpkdiC0_mlaw_r3w6Bder/view?usp=sharing

我希望當我所有的事件（select，deselect，selectAll，deselectAll）可以被父組件發出和接收

對不起一個錯誤：父組件中的 app-multi-dropdown 標簽應該是app-child

Answer 1

您可以將它用作 Angular 反應形式的一部分，並在每次其值更改時發出。

子組件的 HTML 可能是這樣的：

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

和 .ts 文件：

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

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

    @Input() placeholder: string;
    @Input() defaultValues: any[];
    @Input() dropdownItems: any[];
    @Input() dropdownSettings: IDropdownSettings;
    @Output() onDropdownChange = new EventEmitter();
    
    myForm: FormGroup;
    
    constructor(
        private _fb: FormBuilder
    ) { }

    ngOnInit(): void {
        this.myForm = this._fb.group({
            dropdownItems: ['']
        });

        // Set default values as real values
        this.onDropdownChange.emit(this.defaultValues);

        this.myForm.valueChanges.subscribe(val => {
            this.onDropdownChange.emit(val.dropdownItems)
        })
    }

}

編輯：根據您的上次更新：

使用您更新的代碼和我的代碼和平，我構建了這個在 stackblitz 上運行的功能項目： https://stackblitz.com/edit/angular-ivy-g7w3dz

希望我能正確理解邏輯

Answer 2

你沒有正確設置你的發射器。 做這個：

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

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

然后在父母身上：

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