Angular组件传值报错：Event类型无法赋值给any[]类型的解决方法

在Angular中实现下拉框多选复选框功能时，从App组件向multi-selector-dropdown组件传值出现类型错误，错误信息如下：

Error in src/app/app.component.html (3:40)
Argument of type 'Event' is not assignable to parameter of type 'any[]'.
Type 'Event' is missing the following properties from type 'any[]': length, pop, push, concat, and 26 more.

App组件代码如下：

import { Component, VERSION, OnInit, ViewChild } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent implements OnInit {
  name = 'Angular ' + VERSION.major;

  ngOnInit(): void {}

  list: any[];
  checkedList: any[];
  indi: {};
  constructor() {
    this.list = [
      { name: 'India', checked: false },
      { name: 'US', checked: false },
      { name: 'China', checked: false },
      { name: 'France', checked: false },
    ];
  }

  shareCheckedList(item: any[]) {
    console.log(item);
    this.checkedList = item;
  }
  shareIndividualCheckedList(item: {}) {
    console.log(item);
    this.indi = item;
  }
}

错误原因 #

这个错误核心是模板事件绑定传递了原生Event对象，但目标方法期望接收数组类型参数，导致类型不匹配。

修复步骤 #

1. 检查并修正模板绑定逻辑
   打开app.component.html，找到调用shareCheckedList的代码，大概率是错误绑定了原生事件（比如click），或是子组件输出事件时未正确传递数组。正确的写法应该绑定子组件的自定义输出事件，示例：

<multi-selector-dropdown 
  [list]="list"
  (checkedListChange)="shareCheckedList($event)"
  (individualCheckedChange)="shareIndividualCheckedList($event)"
></multi-selector-dropdown>

2. 确保子组件输出正确类型的数据
   在multi-selector-dropdown组件中，用@Output()定义类型为数组的事件发射器，并在选中状态变化时发射正确的数组：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'multi-selector-dropdown',
  templateUrl: './multi-selector-dropdown.component.html',
  styleUrls: ['./multi-selector-dropdown.component.css']
})
export class MultiSelectorDropdownComponent {
  @Input() list: any[];
  @Output() checkedListChange = new EventEmitter<any[]>();
  @Output() individualCheckedChange = new EventEmitter<{}>();

  // 当选中项变化时，筛选出已勾选的项并发射
  updateCheckedItems() {
    const selectedItems = this.list.filter(item => item.checked);
    this.checkedListChange.emit(selectedItems);
  }

  // 单个选项变化时发射当前项
  onItemCheck(item: {}) {
    this.individualCheckedChange.emit(item);
  }
}

3. 类型优化（可选）
   为避免any类型的模糊性，可以定义具体接口约束数据：

// 定义数据接口
interface SelectItem {
  name: string;
  checked: boolean;
}

// 在组件中替换any为接口类型
list: SelectItem[];
checkedList: SelectItem[];
@Output() checkedListChange = new EventEmitter<SelectItem[]>();

验证修改 #

完成以上调整后，重新运行项目，类型错误会消失，shareCheckedList方法能正确接收选中的数组数据。

内容的提问来源于stack exchange，提问作者EMahan K