Дочерний компонент не может получить массив от своего родителя после удаления элемента.

Question

Я новичок в угловой. У меня есть маленький AP с 3 компонентами. Один компонент - это просто ввод и кнопка, которая отправляет входное значение родительскому элементу, а родительский ввод добавляет входные данные в массив, который отправляется вперед дочернему элементу, где я хочу распечатать все объекты массива. Всякий раз, когда я запускаю функцию 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>

Answer 1

Это связано с тем, как в Angular работает обнаружение изменений. У вас есть массивы в нескольких местах и ​​вы используете их в качестве входных данных для компонентов.

Когда вы добавляете к ним задачу, вы используете метод push, который добавляет элемент в массив, но сам массив такой же, в основном ссылка не меняется.

Если вы хотите добавить объект в список задач и активировать обнаружение изменений, вам нужно создать новый массив, например:

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

Таким образом, пример приложения будет работать. Подробнее о обнаружении изменений в Angular здесь .