在从子组件 (Angular) 发出的 selectAll 和 unSelectAll 事件之后，在父组件中获取结果

Question

嗨，我现在正在研究角度，使用 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定义了设置。 您可能会看到我正在做的是在子组件中，我为选择、取消选择和在我发出this.selectedItems的函数中创建了事件发射器。

但我不认为这是实现这一点的好方法，实际上，它的效果并不好。 有时，当我选择或取消选择时，它不会立即更改。

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

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

编辑：

我试图提取所有必要的代码片段来构建一个项目： https://drive.google.com/file/d/1BlV2EtdwZhqqpkdiC0_mlaw_r3w6Bder/view?usp=sharing

我希望当我所有的事件(选择，取消选择，全部选择，取消选择全部(都可以由父组件发出和接收

抱歉，一个错误：父组件中的应用多重下拉标记应该是应用子级

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

编辑：基于您上次更新：

使用您更新的代码和我的代码平静，我构建了这个在堆栈闪电战上运行的功能项目：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>