如何切换选定的项目而不是数组中的所有项目?

时间:2018-11-05 12:48:31

标签: javascript arrays angular multidimensional-array

在这里输出:我想切换当前项目。我如何选择带有索引的单个项目并应用样式? enter image description here

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());
  }

0 个答案:

没有答案