子组件传_id至父组件后，父组件TS中无法调用该值删除数组元素

1. 确保子组件正确发射事件 #

子组件需要通过@Output()装饰器定义事件发射器，点击元素时把_id传递给父组件：

子组件 TS：

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  // 定义事件发射器，类型根据你的_id实际类型调整（string/number）
  @Output() idDeleted = new EventEmitter<string>();

  // 点击元素触发的方法，传入当前项的_id
  deleteItem(itemId: string) {
    this.idDeleted.emit(itemId);
  }
}

子组件 HTML（示例点击元素触发删除）：

<div class="list-item" (click)="deleteItem(item._id)">删除此项</div>

2. 父组件绑定事件并处理删除逻辑 #

父组件在模板中绑定子组件的事件，在TS中编写删除数组元素的函数：

父组件 HTML：

<!-- 绑定子组件的idDeleted事件，将发射的_id传入处理函数 -->
<app-child (idDeleted)="removeItem($event)"></app-child>

父组件 TS：

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent {
  // 目标数组示例
  itemArray = [
    { _id: 'item-001', content: '内容1' },
    { _id: 'item-002', content: '内容2' },
    { _id: 'item-003', content: '内容3' }
  ];

  // 接收子组件传来的_id，删除对应元素
  removeItem(deletedId: string) {
    // 方法1：用filter返回新数组（推荐，纯函数式写法，自动触发视图更新）
    this.itemArray = this.itemArray.filter(item => item._id !== deletedId);

    // 方法2：用splice修改原数组
    // const targetIndex = this.itemArray.findIndex(item => item._id === deletedId);
    // if (targetIndex !== -1) {
    //   this.itemArray.splice(targetIndex, 1);
    // }
  }
}

常见问题排查 #

• 事件名不匹配：子组件@Output()的变量名和父组件模板绑定的事件名必须一致（Angular支持小驼峰转短横线写法，比如idDeleted可写成(id-deleted)，但建议保持命名一致避免混淆）
• 参数类型不匹配：子组件发射的_id类型（string/number）要和父组件接收的参数类型完全一致，否则可能无法获取正确值
• 数组未响应更新：如果使用splice修改原数组，Angular默认能检测到变化；若为复杂对象数组，可尝试用ChangeDetectorRef手动触发变更检测
• 函数拼写错误：检查父组件中处理函数的名称是否和模板绑定的一致，确保函数在TS中正确定义

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