首页 > 解决方案 > 基于数组中的布尔值需要选中和取消选中 nz zorro angular 中表格的复选框

问题描述

我在一个带有复选框的 nz zorro 表中工作。我有一个场景,我需要根据布尔值检查清单。我试图在一个名为 item checked 的方法中传递布尔值和数据索引,值也可以通过,但未选中复选框。/ html /

 <div nz-row class="content">
        <nz-table [class.overflow]="xOverflow" #rowSelectionTable [nzLoading]="loading" [nzData]="listOfData"
            [nzScroll]="{x: xscroll, y: yscroll}">
            <thead>
                <tr>
                    <th nzLeft nzWidth="35px" [nzChecked]="checked" (nzCheckedChange)="onAllChecked($event)" 
                        [nzIndeterminate]="indeterminate"></th>
                    <th nzEllipsis class="itm-category">
                        Item Category
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of rowSelectionTable.data;let i = index;"
                    [ngClass]="{'highlight': selectedIndex.indexOf(i) > -1 }">
                    <td nzLeft [nzChecked]="setOfCheckedId.has(i)" (nzCheckedChange)="onItemChecked(i, $event)"></td>
                    <td class="itm-category">{{data.name}}</td>
                </tr>
            </tbody>
        </nz-table>
    </div>

ts--文件

 this.listOfData=[ {id: 2, name: "SUITING", code: "SU", description: null, mapped: true}, 
            {id: 1, name: "SHIRTING", code: "SH", description: null, mapped: false}]
            for (let i in this.listOfData) {
                this.onItemChecked(i,this.listOfData[i].mapped);
              }
  onAllChecked(checked: boolean): void {
    let allStatuslist;
    if (!checked || this.selectedIndex.length > 0) {
      this.selectedIndex = [];
    }
    this.listOfData.forEach((_item, i) => {
      this.updateCheckedSet(i, checked)
    });
    
    this.refreshCheckedStatus();
  }
  refreshCheckedStatus(): void {
    this.checked = this.listOfData.every((_item, i) => this.setOfCheckedId.has(i));
    this.indeterminate = this.listOfData.some((_item, i) => this.setOfCheckedId.has(i)) && !this.checked;
  }
  updateCheckedSet(id: any, checked: boolean): void {
    if (checked) {
      this.selectedIndex.push(id);
      this.setOfCheckedId.add(id);
      if (this.selectedIndex.length > 0) {
        this.selectedIndex.sort(function (a, b) { return a - b; })
      }
    } else {
      if (this.setOfCheckedId.size <= 1 && this.selectedIndex.length <= 1) {
        this.selectedIndex = [];
     
      }
      else {
        const index = this.selectedIndex.indexOf(id);
        this.selectedIndex.splice(index, 1);
      
      }
      this.setOfCheckedId.delete(id);
    }
    this.selectedIndex = [...this.selectedIndex]
  }
  onItemChecked(id: any, checked: boolean): void {
    console.log(id, checked);
    this.updateCheckedSet(id, checked);
    this.refreshCheckedStatus();
  }

该值在 itemChecked 方法中调用,但未检查清单。对此的任何解决方案

标签: angularng-zorro-antd

解决方案


推荐阅读