如何在 Angular 中将现有子组件数组中的父子有界数据推送？

Question

在 Angular 中，我想将父（App 组件）推送到现有数组中的子组件绑定数据。 让我通过代码展示我想要的——

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

  @Input() set delData(data:todeModel[]){
    console.log("deletedTodo before push", this.deletedTodo);
    this.deletedTodo.push(data[0]);
    console.log("deletedTodo after push", this.deletedTodo);
  }

}

我想将“数据”推送到“deletedToDo”数组中，以便我可以在 ngFor 模块中使用 deletedToDo 数组。

此代码中的问题-

最初第一个控制台是空白的，在 push 方法第二个数组获取数据之后，但是在下一个活动中，当一个更多的已删除数据出现在这种情况下，而不是在数组中添加数据时，它被替换。 数组的长度仍然是-1

预期-每次单击删除按钮时，数据都应添加到 deletedTodo 数组中，输入将通过该按钮进入 delData。

Answer 1

您遇到的问题是每次向其传递新数据时都会调用set delData(data: todeModel[]) setter function； 并且，每次调用它时，它都会创建deletedTodo数组的一个新实例，并且只将数据数组的第一个元素添加到其中。

要解决此问题，您应该在 setter function 之外初始化deletedTodo数组，使其仅创建一次，然后使用展开运算符 ( ... ) 将数据数组的所有元素添加到其中。

export class DeletedToDoComponent {
  deletedTodo: todeModel[] = []; // initialize the array here

  @Input() set delData(data: todeModel[]) {
    console.log("deletedTodo before push", this.deletedTodo);
    this.deletedTodo.push(...data); // use the spread operator to add all elements of the data array
    console.log("deletedTodo after push", this.deletedTodo);
  }
}