如何選擇角度6中的所有復選框？

Question

如何選擇角度6中的所有復選框？

我正在嘗試制作一個帶有復選框的表格，但我無法設置一個復選框來檢查每頁中所有的復選框。 我想選中所有復選框，但無法正常工作。

HTML

  <table id="myTable"> <tbody > </tbody> <tbody > <tr > <th> <input type=" checkbox" (change)="checkAll(this)"> </th> <th> id </th> <th> fname </th> </tr> </tbody> <tbody *ngFor="let item of result" style="border:1px solid #D3D3D3"> <td> <input type="checkbox" (change)="getCheckboxValues($event,item)" [checked]="check_true"> </td> <td> {{ item.id }} </td> <td> {{ item.fname }} </td> </tbody> </table> 

component.ts

       getCheckboxValues(ev, data) {
    let obj = {
      "order": data
    }
    let selected_rows = [];

    if (ev.target.checked) {
      // Pushing the object into array
      this.newArray.push(obj);
    } else {
      let el = this.newArray.find(itm => itm.order === data);

      if (el)
        this.newArray.splice(this.newArray.indexOf(el), 1);
      if (this.newArray.length == 0) {
        this.newArray = [];
      }
    }

    if (this.newArray.lenght > 0) {
      for (let i in this.newArray) {
        selected_rows.push(this.newArray[i].order.bulkid);

        this.selected_rows = selected_rows;
      }
    }
  }

  checkAll(ele) {

    var checkboxes = document.getElementsByTagName('input');
    if (ele.checked) {
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type == 'checkbox') {
                checkboxes[i].checked = true;
            }
        }
    } else {
        for (var i = 0; i < checkboxes.length; i++) {
            if (checkboxes[i].type == 'checkbox') {
                checkboxes[i].checked = false;
            }
        }
    }
    console.log(ele)
}

我正在嘗試制作一個帶有復選框的表格，但我無法設置一個復選框來檢查每頁中所有的復選框。 我想選中所有復選框，但無法正常工作。

Answer 1

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'Angular 6 CheckBox Select/ Unselect All';
  masterSelected:boolean;
  checklist:any;
  checkedList:any;

  constructor(){
      this.masterSelected = false;
      this.checklist = [
        {id:1,value:'A',isSelected:false},
        {id:2,value:'B',isSelected:true},
        {id:3,value:'C',isSelected:true},
        {id:4,value:'D',isSelected:false},
        {id:5,value:'E',isSelected:false},
        {id:6,value:'F',isSelected:false},
        {id:7,value:'G',isSelected:false},
        {id:8,value:'H',isSelected:false}
      ];
  }

}

Answer 2

准備了一個小演示，以演示如何使用ngModel指令完成此操作。 鏈接： https ： //stackblitz.com/edit/angular-lxjrdh

它使用Array.every來檢查是否全部選中。 如果選中，它將全部重置，否則將全部選中。