Angular中点击列表元素添加删除线并修改completed状态

1. 修改模板（HTML） #

给<li>元素添加点击事件绑定，同时根据completed字段动态设置文本装饰样式：

<h1>To Do List</h1>
<input #newTodo>
<button (click)="addTodo(newTodo.value)">Add Todo</button>

<ul>
  <li 
    *ngFor="let todo of todos" 
    (click)="toggleTodo(todo)"
    [style.text-decoration]="todo.completed ? 'line-through' : 'none'"
  >
    {{todo.title}}
  </li>
</ul>

如果想让样式更灵活，推荐用CSS类的方式：
先在组件CSS文件中定义类：

.completed {
  text-decoration: line-through;
  color: #999; /* 可选：添加灰色调增强视觉区分 */
}

再修改模板为类绑定：

<li 
  *ngFor="let todo of todos" 
  (click)="toggleTodo(todo)"
  [class.completed]="todo.completed"
>
  {{todo.title}}
</li>

2. 在组件中实现状态切换方法 #

在AppComponent里新增toggleTodo方法，用来切换对应todo项的completed状态：

export class AppComponent implements OnInit {
  title = 'todo-app';
  // 替换any为明确类型，增强代码安全性
  todos: { userId: number; title: string; completed: boolean }[] = [];

  constructor(private service: TodoService) {}

  ngOnInit() {
    this.service.getTodos()
      .subscribe(response => {
        this.todos = response;
      });
  }

  addTodo(title: string){
    this.todos.push({
      userId: 1, 
      title, 
      completed: false
    });
  }

  // 新增切换状态的方法
  toggleTodo(todo: { userId: number; title: string; completed: boolean }) {
    todo.completed = !todo.completed;
  }
}

补充：类型优化（可选但推荐） #

为了彻底避免any，可以定义一个Todo接口：

interface Todo {
  userId: number;
  title: string;
  completed: boolean;
}

export class AppComponent implements OnInit {
  title = 'todo-app';
  todos: Todo[] = [];

  // ... 其余代码不变

  toggleTodo(todo: Todo) {
    todo.completed = !todo.completed;
  }
}

现在点击列表项时，会自动切换该项的completed状态，同时触发删除线样式的显示/隐藏。

内容的提问来源于stack exchange，提问作者AllanSwe