执行ng build --prod时报EventEmitter无调用签名错误求助

错误原因分析 #

你遇到的这个问题核心是命名冲突：

• 组件里你用@Output()装饰了一个名为selectedValues的EventEmitter变量
• 同时在模板的<mat-selection-list>上绑定了(selectionChange)="selectedValues($event)"，试图调用一个同名方法

在开发模式（ng serve）下Angular的类型检查没那么严格，所以没触发错误；但生产构建（ng build --prod）会启用严格类型校验，TypeScript会把selectedValues识别成EventEmitter而非可调用的方法，自然就抛出了"缺少调用签名"的错误。

修复步骤 #

1. 重命名EventEmitter变量，避免冲突

把组件里的@Output变量改成一个不与方法名重复的名字，比如selectedValuesChange：

@Output() selectedValuesChange: EventEmitter<string[]> = new EventEmitter<string[]>();

2. 更新所有emit调用的地方

组件里所有原来调用this.selectedValues.emit()的地方，都替换成新的变量名：

commitVal() {
  this.selectedValuesChange.emit(this.values);
}

addVal(v: string){
  // ... 原有逻辑保持不变
  this.selectedValuesChange.emit(this.values);
}

removeVal(v){
  // ... 原有逻辑保持不变
  this.selectedValuesChange.emit(this.values);
}

3. 实现模板中绑定的selectedValues方法

你之前没有实现这个处理选择变化的方法，现在补充到组件类里（可以根据你的需求添加逻辑）：

import { MatSelectionListChange } from '@angular/material/list';

// ... 组件类其他代码

selectedValues(event: MatSelectionListChange) {
  // 示例：更新选中选项列表
  this.selectedOptions = event.options.map(item => item.value);
}

额外优化建议 #

另外，你在removeVal方法里用filter遍历数组的方式不太高效，推荐改成更简洁直接的写法：

removeVal(v){
  this.selectedOptions = v.selectedOptions.selected.map(item => item.value);
  // 用filter直接生成新数组，替代splice的方式
  this.values = this.values.filter(val => !this.selectedOptions.includes(val));
  this.selectedValuesChange.emit(this.values);
}

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