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

【问题标题】：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 问题是在我删除或按下完成按钮后，我无法再添加任何任务了。

标签： arrays angular components

【解决方案1】：

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

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

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

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

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

【讨论】：