javascript - 如何选择 Angular 6中的所有复选框？

Question

如何选择 Angular 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>

组件.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

准备了一个小演示来展示如何使用 ngModel 指令来完成此操作。链接:https://stackblitz.com/edit/angular-lxjrdh

它使用Array.every来检查是否全部被检查。如果选中，它将重置所有其他选项。