在Angular中,如果要删除所有已完成的任务并不刷新页面,可以通过以下解决方法:
import { Component } from '@angular/core';
@Component({
selector: 'app-todo-list',
templateUrl: './todo-list.component.html',
styleUrls: ['./todo-list.component.css']
})
export class TodoListComponent {
tasks: string[] = ['任务1', '任务2', '任务3']; // 示例任务列表
deleteCompletedTasks() {
this.tasks = this.tasks.filter(task => !task.includes('(已完成)'));
}
}
在上述代码中,我们使用了filter
方法来过滤掉所有已完成的任务。根据任务的特定标识符(例如(已完成)
)来判断任务是否已完成。
-
{{ task }}
通过使用*ngIf
条件语句,只有当任务未包含(已完成)
标识符时,才会显示该任务。
这样,在点击“删除已完成的任务”按钮后,已完成的任务将从任务列表中移除,而不刷新整个页面。