时间戳

首页 > 解决方案 > 我想使用 filter() 运算符来删除一个元素，但是在将更改后的列表作为新列表传递时遇到了麻烦？

angular - 我想使用 filter() 运算符来删除一个元素，但是在将更改后的列表作为新列表传递时遇到了麻烦？

问题描述

当我尝试使用 Filter() 运算符删除元素时，我一直坚持这个问题。我想将更改后的列表作为新列表传递，但不知道如何。有任何想法吗？

我的 Service.ts 代码：


export class TaskServiceService {

  constructor() { }
  getTasks(): Observable<Task[]> {
    return of(TASKS);
  }
  filterTasks(task: Task):Observable<Task[]>{
    let filteredTasks = TASKS.filter(t => t.name !== task.name);
    return of(filteredTasks);
  }
}

这是我的 Component.ts 文件，我想从虚拟数据中传递列表：

  ngOnInit(): void {
      this.getTasks();
  }

  deleteTask(task : Task){
     this.taskService.filterTasks(task)
    .subscribe(tasks => this.tasks = tasks);
  }

以及来自 Component.html 文件的片段：

<button class="btn btn-danger btn-sm" (click)="deleteTask(task)">x</button>

标签： angularfilterrxjs

解决方案

为什么要使用 Observables 和订阅？对我来说似乎完全矫枉过正和复杂。这只是关于删除一个简单数组中的一项，不是吗？

假设您的task界面有一个id字段：

<button class="btn btn-danger btn-sm" (click)="deleteTask(task)">x</button>

deleteTask(task : Task){
     this.tasks = this.tasks.filter( t => t.id !== task.id )
}

推荐阅读