Question

我是初学者。我有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>

Answer 1

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

当您向他们添加任务时，您可以使用push方法将元素添加到数组中，但是数组本身是相同的，基本上引用不会更改。

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

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

通过这种方式，示例应用程序将可以运行。有关change detection in Angular here的更多信息。

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

1 个答案: