如何使用Angular 5删除待办事项列表中的多个任务

我正在Angular 5中建立一个待办事项列表，并试图删除几个任务。每个任务都是一个复选框，如果选中了多个任务，则当我单击“全部删除”按钮（功能deleteSelected）时，应同时删除所有这些任务。但有时有效，有时无效我不明白为什么

以下是我目前的代码：

**todo.component.html**

<div class="main">
 <h1>To-do-list Alexandre, Cissé</h1>
 <div class="addItem">
  <form (ngSubmit)="addTodo()" #todoForm="ngForm">
   <input [(ngModel)] = "newTodo.newTodo" placeholder="Add a new todo" class="addText" name="newTodo">
   <button type="submit" class="btn-success">ADD</button>
  </form>
 </div>

<ul>
 <li *ngFor="let todo of todos; let number = index">
   <input type="checkbox" [(ngModel)]="todo.status">
   {{todo.newTodo}}
   <button (click)="deleteTodo(number)" class="btn-warning">Delete</button>
 </li>
</ul>
<br />
 <button (click)="deleteSelected()" class="btn-danger">DELETE ALL</button>
</div>

**todo.component.ts**

import { Component, OnInit } from '@angular/core';
import { Todo } from './todo';

@Component({
selector: 'app-todo',
templateUrl: './todo.component.html',
styleUrls: ['./todo.component.css']
})

export class TodoComponent implements OnInit {
  todos: Todo[] = [];
  newTodo = new Todo();

  addTodo () {
    this.todos.push(this.newTodo);
    this.newTodo = new Todo();
     }

  deleteTodo (index) {
    this.todos.splice(index, 1);
   }


  deleteSelected () {
    this.todos.forEach(function(value, index, object) {
    if (value.status === true) {

     //here I can't understand why it doesn't work

     object.splice(index, 1);
     }

     });
    }


   constructor() { }

    ngOnInit() {
   }

   }


   **todo.ts**

   export class Todo {
     static lastId = 0;
     public id: number;
     public newTodo: string;
     public status: boolean;

   constructor() {
     this.id = Todo.lastId + 1;
     this.status = false;
     Todo.lastId++;
       }
     }

**todo.component.html**
要做的事情列表Alexandre，西塞
添加


{{todo.newTodo}}
删除




全部删除
**todo.component.ts**
从“@angular/core”导入{Component，OnInit}；
从“/Todo”导入{Todo}；
@组成部分({
选择器：“应用程序待办事项”，
templateUrl:“./todo.component.html”，
样式URL:['./todo.component.css']
})
导出类TodoComponent实现OnInit{
待办事项：待办事项[]=[]；
newTodo=新Todo（）；
addTodo（）{
this.todos.push（this.newTodo）；
this.newTodo=新Todo（）；
}
删除TODO（索引）{
这个.todos.splice（索引，1）；
}
删除选定的（）{
this.todos.forEach（函数（值、索引、对象）{
如果（value.status==true）{
//在这里，我不明白为什么它不起作用
对象。拼接（索引，1）；
}
});
}
构造函数（）{}
恩戈尼尼特（）{
}
}
**待办事项**
导出类待办事项{
静态lastId=0；
公众id：号码；
公共newTodo:string；
公共地位：布尔；
构造函数（）{
this.id=Todo.lastId+1；
这个.status=false；
Todo.lastId++；
}
}

---

感谢您在

deleteSelected

功能中提供的帮助

，而不是执行

object.splice(index, 1);

使用

---

参考：

为简单起见，在您的案例中可以使用以下功能：

this.todos = this.todos.filter((todo)=> !todo.status);

---

尝试使用

filter

函数删除您要删除的内容，例如

this.todos=this.todos.filter（（todo）=>todo.status！=true）

，它只会在状态不为true时保留todo

this.todos = this.todos.filter((todo)=> !todo.status);