Angular6实现复选框的全选

顾名思义全选就是点击全选按钮所有的复选框按钮都会被选中！话不多说，直接上代码

这里实现点击全选表格中的选择一列的复选框全部被选中，批量操作按钮变为可编辑状态，再次点击全选则取消全选批量操作按钮变为不可编辑状态

　　

 

html:<span><input type="checkbox" [(checked)]="master" (click)="checkAll($event)">全选</span>  
表格项：
　　

<table class="form-table table-bordered" id="formTables">
  <thead>
  <tr class="table-head">
    <th>序号</th>
    <th>检测编号</th>
    <th>检材名称</th>
    <th>检材形状</th>
    <th>检材颜色</th>
    <th>送检重量</th>
    <th>称重设备</th>
    <th>备注</th>
    <th>分类标识</th>
    <th>选择</th>
  </tr>
  </thead>
  <tbody>
  <tr class="cursor" *ngFor="let item of sampleList;let i=index">
    <td>{{i+1}}</td>
    <td>{{item.sampleId}}</td>
    <td>{{item.sampleName}}</td>
    <td>{{item.sampleShape}}</td>
    <td>{{item.sampleColor}}</td>
    <td>{{item.weight}}</td>
    <td>{{item.equipment}}</td>
    <td>{{item.remarks}}</td>
    <td>
      <span><input type="checkbox" disabled [(checked)]="item.trainStatus">训练样本</span>
      <span class="m-l-xs"><input type="checkbox" disabled [(checked)]="item.testStatus">测试样本</span>
      <span class="m-l-xs"><input type="checkbox" disabled [(checked)]="item.otherStatus">其他样本</span>
    </td>
    <td>
      <input type="checkbox" [(checked)]="item.status" (click)="checkboxClick($event,i);checkBoxOne()">
    </td>
  </tr>
  </tbody>
</table>

ts:　　　　

sampleList = [
  {sampleId:\'201702010-1\',sampleName:\'甲卡西酮\',sampleShape:\'粉末\',sampleColor:\'红色\',weight:3.2,equipment:\'JY1002电子天平\',
    remarks:\'甲基苯\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:\'201702010-2\',sampleName:\'四氢大麻酚\', sampleShape:\'粉末\',sampleColor:\'红色\',weight:4.23,equipment:\'JY1002电子天平\',
    remarks:\'吗啡定量\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:\'201702010-3\',sampleName:\'α-氰基苯丙酮\',sampleShape:\'粉末\', sampleColor:\'黄色\',weight:3.16,equipment:\'JY1002电子天平\',
    remarks:\'可卡因定性\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:\'201702010-4\',sampleName:\'氯代麻黄碱\', sampleShape:\'粉末\',sampleColor:\'红色\',weight:2.35,equipment:\'JY1002电子天平\',
    remarks:\'可卡因定量\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:\'201702010-5\',sampleName:\'1-（3-氯苯基）哌嗪\', sampleShape:\'粉末\',sampleColor:\'红色\',weight:1.56,equipment:\'JY1002电子天平\',
    remarks:\'甲基苯\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:\'201702010-6\',sampleName:\'甲卡西酮\',sampleShape:\'粉末\', sampleColor:\'黄色\',weight:3.02,equipment:\'JY1002电子天平\',
    remarks:\'甲基苯\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:\'201702010-7\',sampleName:\'四氢大麻酚\',sampleShape:\'粉末\', sampleColor:\'黄色\',weight:4.23,equipment:\'JY1002电子天平\',
    remarks:\'罂粟定量\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:\'201702010-8\',sampleName:\'α-氰基苯丙酮\',sampleShape:\'粉末\', sampleColor:\'黄色\',weight:3.26,equipment:\'JY1002电子天平\',
    remarks:\'甲卡西酮定量\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:\'201702010-9\',sampleName:\'氯代麻黄碱\',sampleShape:\'粉末\', sampleColor:\'黄色\',weight:3.56,equipment:\'JY1002电子天平\',
    remarks:\'甲卡西酮定性\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:\'201702010-10\',sampleName:\'1-（3-氯苯基）哌嗪\',sampleShape:\'粉末\', sampleColor:\'红色\',weight:4.18,equipment:\'JY1002电子天平\',
    remarks:\'氰化钾定性\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:\'201702010-11\',sampleName:\'氯代麻黄碱\',sampleShape:\'粉末\', sampleColor:\'红色\',weight:3.15,equipment:\'JY1002电子天平\',
    remarks:\'氰化钾定性\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:\'201702010-12\',sampleName:\'1-（3-氯苯基）哌嗪\',sampleShape:\'粉末\', sampleColor:\'红色\',weight:3.24,equipment:\'JY1002电子天平\',
    remarks:\'甲卡西酮定量\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:\'201702010-13\',sampleName:\'氯代麻黄碱\',sampleShape:\'粉末\', sampleColor:\'黄色\',weight:5.12,equipment:\'JY1002电子天平\',
    remarks:\'甲基苯\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:\'201702010-14\',sampleName:\'四氢大麻酚\',sampleShape:\'粉末\', sampleColor:\'黄色\',weight:2.46,equipment:\'JY1002电子天平\',
    remarks:\'吗啡定量\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
  {sampleId:\'201702010-15\',sampleName:\'1-（3-氯苯基）哌嗪\', sampleShape:\'粉末\',sampleColor:\'黄色\',weight:2.58,equipment:\'JY1002电子天平\',
    remarks:\'可卡因定量\',trainStatus:false,testStatus:false,otherStatus:false,status:false},
]

master:boolean = false; //默认全选按钮没有被选中

batchShow:boolean = true; //批量操作按钮是否可以编辑

// 全选
checkAll(e){
  let checked = e.target.checked;  //判断全选按钮是否被选中
  if(checked){
    this.sampleList.forEach(function(key,val){       //遍历表格数据的列表项
      key.status=true;                               //选择那一列所有的都会被选中
    });

this.batchShow = false;

  }else{
    this.sampleList.forEach(function(key,val){       //全选按钮被选中，则遍历表格数据项，将状态设置为false
      key.status=false;
    });

this.batchShow = true;

  }
  this.master = checked;
}

以上所写则可以实现全选批量操作按钮可以点击，反选批量操作按钮不可以点击