Angular中如何将父组件数据追加到子组件现有绑定数组中？

你遇到的核心问题是子组件的deletedTodo数组无法持续追加数据，始终保持长度1，可能由以下两种原因导致，对应解决方案如下：

一、子组件被重复实例化 #

如果父组件中你的DeletedToDoComponent被包裹在*ngIf、*ngFor或者路由组件中，每次操作可能触发子组件销毁重建，导致deletedTodo被重新初始化为空数组，每次push后仅保留1条数据。

解决方法：
将deletedTodo的数据源转移到父组件或共享服务中维护，子组件仅负责接收数据并展示：

1. 父组件维护数据数组

// 父组件 AppComponent
deletedTodos: todeModel[] = [];

onDelete(item: todeModel) {
  this.deletedTodos.push(item);
}

2. 子组件直接接收完整数组

// 子组件 DeletedToDoComponent
@Input() deletedTodos: todeModel[] = [];

3. 子组件模板使用*ngFor

<div *ngFor="let todo of deletedTodos">
  <!-- 展示内容 -->
</div>

二、输入属性变更未触发setter #

Angular输入属性的变更检测基于引用变化，如果父组件每次修改的是同一个数组的元素而非创建新数组，子组件的setter不会触发；或者你仅push了数组的第一个元素，但父组件传递的数组内容被覆盖。

解决方法：

1. 优化子组件的setter逻辑，支持追加整个传入数组的元素：

export class DeletedToDoComponent{
  deletedTodo: todeModel[] = [];

  @Input() set delData(data: todeModel[]){
    // 先校验数据有效性，避免空值或空数组
    if (data?.length) {
      // 追加数组中所有元素，而非仅第一个
      this.deletedTodo.push(...data);
    }
  }
}

2. 父组件传递新数组引用，确保触发子组件setter：

// 父组件
delData: todeModel[] = [];

onDelete(item: todeModel) {
  // 创建新数组，触发变更检测
  this.delData = [...this.delData, item];
  // 若每次仅传递当前删除项，也可直接传单元素数组：this.delData = [item];
}

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