Angualar多选复选框逻辑处理

在html里引用多选框组件，并双向绑定数据

[nzIndeterminate] ：表示未全选状态时，全选按钮的状态变化
[(nzChecked)]：表示选中状态后的数据传值

<tr>
<th nzShowCheckbox  [(nzChecked)]="allChecked" [nzIndeterminate]="indeterminate" (nzCheckedChange)="checkAll($event)"></th>
</tr>
 <tr *ngFor="let data of dataList">
     <td nzShowCheckbox  style="width:24px" [(nzChecked)]="data.checked" (nzCheckedChange)="refreshCheckStatus()"></td>
 </tr>

在JS里撰写逻辑
1.单选数据函数：未全选时的逻辑判断，同时反馈给全选按钮，使其状态该变为"点"
2.全选函数：全选时，全选按钮状态改变为"勾选"；全部不选时，全选按钮状态改变为"空白"
3.翻页后，所有状态恢复默认

//表格多选框
  //单选数据
  refreshCheckStatus() {
    let checkedNum = 0;
    this.dataList.forEach(item => {
      checkedNum += item.checked ? 1 : 0;
    });
    if (checkedNum != this.dataList.length && checkedNum != 0) {
      this.indeterminate = true;
    } else {
      this.indeterminate = false;
    }
    if (checkedNum != 0) {
      this.exportDisabled = false;
      this.deleteDisabled = false;
    } else {
      this.exportDisabled = true;
      this.deleteDisabled = true;
    }
    this.allChecked = checkedNum === this.dataList.length;
  }
  //全选数据
  checkAll(value: boolean): void {
    this.exportDisabled = true;
    this.deleteDisabled = true;
    this.dataList.forEach(item => {
      item.checked = value;
      if (item.checked == true) {
        this.exportDisabled = false;
        this.deleteDisabled = false;
      }
      this.indeterminate = false;
    });
  }
  //翻页处理单选多选
  currentPageDataChange($event: Array<{
    checked: boolean;
  }>): void {
    this.dataList = $event;
    this.refreshCheckStatus();
  }