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;}以上所寫則能夠實現全選批量操做按鈕能夠點擊，反選批量操做按鈕不能夠點擊