在这里输出:我想切换当前项目。我如何选择带有索引的单个项目并应用样式?
app.component.html:
<section class="main">
<ul class="todo-list">
<li *ngFor="let todo of todos; let i = index">
<div class="view">
<input class="toggle" type="checkbox"
(click)="toggleTodoComplete(todo)"
[checked]="true">
<label [ngClass]="{strike: !checkIt}">{{todo.title}}</label>
<button class="destroy" (click)="removeTodo(todo)">
</button>
</div>
</li>
</ul>
app.component.css
.strike {
text-decoration: line-through;
}
app.component.ts
import { ToDo } from './todo';
import { TodoDataService } from './todo-data.service';
todos: ToDo[];
checkIt = false;
toggleTodoComplete(todo) {
this.checkIt = !this.checkIt;
}
Todo.ts(类)
export class ToDo {
constructor(public title: string) {}
}
todo-data.service.ts
export class TodoDataService {
todosChanged = new Subject<ToDo[]>();
checkIt = false;
private myTodos: ToDo[] = [
new ToDo('First'),
new ToDo('Second'),
];
getTodos() {
return this.myTodos.slice();
}
addTodo(todo: ToDo) {
this.myTodos.push(todo);
this.todosChanged.next(this.myTodos.slice());
}