删除元素后，子组件无法从其父组件获取数组。

Posted 2023-02-23

【中文标题】删除元素后，子组件无法从其父组件获取数组。

【英文标题】：Child component cant get array from its parent after removing an element.

【发布时间】：2019-04-07 15:30:36

【问题描述】：

我是 Angular 的初学者。我有 3 个组件的小型 ap。 一个组件只是输入和按钮，它将输入值发送给父级，父级将传入的输入添加到一个数组中，该数组转发给我想打印出数组的所有对象的子级。每当我运行函数 remove() 并尝试通过 add() 添加另一个元素时，它只会添加到 listOfTasks，但不会添加到 taskList。谁能解释一下原因？

带输入的组件：

  export class InputTaskComponent implements OnInit 

  @Output('newTask') newTask = new EventEmitter<string>();
  input: string;

  constructor()  

  ngOnInit() 
  

   add() 
        this.newTask.emit(this.input);
        this.input='';

主要组件：

 export class AppComponent 

  addedTask: string;
  listOfTasks: string[]=[];
  doneTask:string[]=[];


  constructor()  
  

  receiveNewTask(event) 
    this.addedTask=event;
    this.listOfTasks.push(this.addedTask);
  
  receiveDoneTask(event) 
    this.doneTask.push(event);
  

第二个孩子：

    export class AddTaskComponent implements OnInit 


  @Input('tasksFromInput') taskList: string[];
  @Output('doneTask') doneTask = new EventEmitter<string>();

  constructor() 
  

  ngOnInit() 

  

  done(task) 
    this.doneTask.emit(task);

  
  remove(task) 
    this.taskList = this.taskList.filter(e => e !== task);
    console.log(this.taskList);
  

主要组件的html：

  <div>
  <div style="float:left; width:300px;">
    <app-input-task (newTask)="receiveNewTask($event)">

    </app-input-task>
  </div>
  <div style="float:left; width:300px;">
    <app-add-task [tasksFromInput]="listOfTasks" (doneTask)="receiveDoneTask($event)">

    </app-add-task>
  </div>
    <div style="float:left; width:300px;">
      <app-done-task [done]="doneTask">

      </app-done-task>
    </div>
</div>

【问题讨论】：

你能不能试着在 StackBlitz 上重现这个，这样会更容易理解。

stackblitz.com/edit/angular-barw7d 问题是在我删除或按下完成按钮后，我无法再添加任何任务了。

【参考方案1】：

这是由于更改检测在 Angular 中的工作方式。您在多个地方都有数组，并将它们用作组件的输入。

当你向它们添加任务时，你使用了将元素添加到数组中的 push 方法，但数组本身是相同的，基本上引用不会改变。

当您想将对象添加到任务列表并触发更改检测时，您必须创建一个新数组，例如：

this.listOfTasks = [...this.listOfTasks, this.addedTask];

这样，示例应用程序就可以工作了。有关change detection in Angular here 的更多信息。