如何在Angular中选择全部和取消选择复选框？

Question

我正在做一个有角度的待办事项列表。我正在尝试全选并取消选择所有复选框部分。

tod​​o.ts

import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { TodoService } from '../../services/todo.service';

import { Todo } from 'src/app/models/Todo';

@Component({
  selector: 'app-todo-item',
  templateUrl: './todo-item.component.html',
  styleUrls: \['./todo-item.component.css'\]
})
export class TodoItemComponent implements OnInit {
  @Input() todo: Todo;
  @Output() deleteTodo: EventEmitter<Todo> = new EventEmitter();

  constructor(private todoService:TodoService) { }

  ngOnInit() {
  }

  // Set Dynamic Classes
  setClasses() {
    let classes = {
      todo: true,
      'is-complete': this.todo.completed
    }

    return classes;
  }

  onToggle(todo) {
    // Toggle in UI
    todo.completed = !todo.completed;
    // Toggle on server
    this.todoService.toggleCompleted(todo).subscribe(todo => console.log(todo));
  }

  onDelete(todo) {
    this.deleteTodo.emit(todo);
  }
checkUncheckAll() {
  for (var i = 0; i < this.todos.length; i++) {
    this.checkUncheckAll\[i\].isSelected = this.todos;
  }
  this.checkUncheckAll();
}


}][1]][1]

tod​​o.html

<div class="login-page">
    <form class="form" (ngSubmit)="onSubmit()" class="login-form">
        <input (change)="onToggle(todo)" type="checkbox" />
    {{ todo.title }}
    <button (click)="onDelete(todo)" class="del">x</button>
    </form>
</div>

以上是我的 Html 代码。在那我尝试插入一个全选和取消全选按钮。 我尝试选择所有复选框的功能。

Answer 1

// Todo.ts
export class Todo {
  id: number;
  title: string;
  completed: boolean;
  selected: boolean;
}   

// todo-item.component.html
<div [ngClass]="setClasses()">
  <p>
    <input (change)="onToggle(todo)" type="checkbox" [checked]="todo.selected"/>
    {{ todo.title }}
    <button (click)="onDelete(todo)" class="del">x</button>
  </p>
</div>     

// todos.component.html
<app-add-todo (addTodo)="addTodo($event)"></app-add-todo>
<div>
  <button type="submit" value="Submit" class="btn action-button" (click)="checkAll()">Select All</button>
  <button type="submit" value="Submit" class="btn action-button" (click)="uncheckAll()">Deselect All</button>
  <button type="Reset" value="Submit" class="btn action-button" (click)="resetAll()">Reset</button>
</div>
<app-todo-item *ngFor="let todo of todos" [todo]="todo" (deleteTodo)="deleteTodo($event)">
</app-todo-item> 

// todos.component.css
.action-button {
    margin-right: 10px;
}  

// todos.component.ts
export class TodosComponent implements OnInit {
  todos: Todo[];

  constructor(private todoService: TodoService) { }

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

  deleteTodo(todo: Todo) {
    // Remove From UI
    this.todos = this.todos.filter(t => t.id !== todo.id);
    // Remove from server
    this.todoService.deleteTodo(todo).subscribe();
  }

  addTodo(todo: Todo) {
    this.todoService.addTodo(todo).subscribe(todo => {
      this.todos.push(todo);
    });
  }

  checkAll() {
    for (let i = 0; i < this.todos.length; i++) {
      this.todos[i].selected = true;
    }
  }

  uncheckAll() {
    for (let i = 0; i < this.todos.length; i++) {
      this.todos[i].selected = false;
    }
  }
}

这里我为 todo 对象引入了一个名为 selected 的新属性，它绑定到输入的选中属性。

我在处理选择和取消选择操作的组件中添加了两个名为 checkAll 和 uncheckAll 的方法，这需要绑定到 SelectAll 和 UnselectAll 按钮的单击事件。

这些方法将遍历待办事项列表并根据执行的操作更改选定属性的值，然后复选框将相应地被选中和取消选中。