Angular子组件触发父组件删除函数报错问题排查

核心错误原因 #

• 父组件this.data未定义：模板里通过*ngIf="filteredData$ | async as data"创建的data是模板局部变量，组件类（item-list.component.ts）中并未声明data属性，调用this.data.splice()时自然会抛出undefined错误。
• 子组件事件传递无效：子组件removeTask方法中emit(true)传递的是布尔值，但父组件期望接收列表项索引，后续无法正确定位要删除的元素。

分步修复方案 #

1. 修正父组件数据引用问题 #

父组件需要维护可直接操作的原始数据数组，同时确保Observable能随数据更新同步刷新模板。

修改item-list.component.ts：

import { Component, OnInit } from '@angular/core';
import { Observable, BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-item-list',
  templateUrl: './item-list.component.html',
  styleUrls: ['./item-list.component.scss'],
})
export class ItemListComponent implements OnInit {
  // 用BehaviorSubject管理数据，确保数据更新时能通知订阅者
  private tasksSubject = new BehaviorSubject<TaskType[]>([]);
  public filteredData$: Observable<TaskType[]> = this.tasksSubject.asObservable();

  ngOnInit(): void {
    // 初始化数据（比如从服务获取或本地初始化）
    // this.tasksSubject.next(初始数据数组);
  }

  removeTask(index: number) {
    const currentTasks = this.tasksSubject.value;
    // 校验索引合法性，避免越界
    if (index >= 0 && index < currentTasks.length) {
      currentTasks.splice(index, 1);
      // 传递新数组触发变更检测，刷新模板
      this.tasksSubject.next([...currentTasks]);
    }
  }

  // 其他方法（如addTask）也需要通过tasksSubject更新数据
  addTask() {
    const newTask = { task: this.nameControl.value }; // 根据实际TaskType结构调整
    const currentTasks = this.tasksSubject.value;
    this.tasksSubject.next([...currentTasks, newTask]);
    this.nameControl.reset();
  }
}

2. 修正子组件事件传递逻辑 #

让子组件接收父组件传入的索引，并在删除时传递该索引给父组件，确保定位准确。

修改item.component.ts：

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

@Component({
  selector: 'app-item',
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.scss'],
})
export class ItemComponent implements OnInit {
  @Input() value: any;
  @Input() index: number; // 新增接收索引的Input
  IsChecked: boolean;

  @Output() inputDataChange: EventEmitter<number> = new EventEmitter<number>(); // 调整泛型为number

  constructor() {
    this.IsChecked = false;
  }

  ngOnInit(): void {}

  removeTask() {
    this.inputDataChange.emit(this.index); // 传递索引给父组件
  }
}

修改item-list.component.html：

给子组件传入index属性：

<app-item
  [value]="value"
  [index]="index"
  *ngFor="let value of data; index as index"
  (inputDataChange)="removeTask(index)"
  cdkDrag
>
</app-item>

3. 额外模板错误修正 #

子组件中Matbutton是拼写错误，应改为标准的button搭配mat-icon-button指令：

<button mat-icon-button [matMenuTriggerFor]="menu">
  <mat-icon>more_vert</mat-icon>
</button>

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