Как выбрать все и снять флажок в Angular?

Question

Я делаю угловой список Тодо. В этом я пытаюсь сделать selectall и снять все флажки часть.

todo.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]

todo.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 к компоненту, который обрабатывает действия выбора и отмены выбора, которые необходимо привязать к событию click ваших кнопок SelectAll и UnselectAll.

Эти методы будут выполнять итерацию по списку задач и изменять значение выбранного свойства в зависимости от выполненного действия, а затем флажки будут соответственно отмечены и сняты.