Question

我有一个表，该表的列包含使用*ngFor的每一行的复选框。单击按钮后，我要取消选中所有复选框。我尝试对每个复选框使用[(ngModel)]="boxChecked"，并在我的按钮单击调用的方法中将该值设置为false，但是每当我仅选中其中一个复选框时，就会导致选中每个复选框。单击按钮后，确实会取消选中所有复选框，但是我仍然需要能够单独选中复选框。

<ng-template pTemplate="body" let-sub let-expanded="expanded" let-columns="columns">
      <tr [pSelectableRow]="subcontract">
        <td *ngFor="let col of columns" [ngSwitch]="true" style="text-align: center">
          <div *ngSwitchCase="col.export" ><input type="checkbox" (change)="checked($event, sub)" [(ngModel)]="boxChecked"></div>
        </td>
      </tr>
</ng-template>
<button type="button"(click)="reset(table)"></button>

ts：

//I send the ID of the table to this method.
reset(table) {
    table.reset();
    this.boxChecked = false;
}

到目前为止，在我的研究中，我还没有看到表上有某种get(index i)（获取索引参数的单行）方法。然后，我可以轻松地遍历表并将每个迭代（行）的复选框设置为false。

Answer 1

由于复选框未绑定到属性（可以重置为取消选中该复选框），因此可以使用模板引用变量（例如#checkboxes）

<input #checkboxes type="checkbox" ...>
...
<button type="button" (click)="uncheckAll()"></button>

检索代码中带有ViewChildren的复选框，然后取消选中每个复选框：

@ViewChildren("checkboxes") checkboxes: QueryList<ElementRef>;

uncheckAll() {
  this.checkboxes.forEach((element) => {
    element.nativeElement.checked = false;
  });
}

有关演示，请参见this stackblitz。

Answer 2

您可以尝试以下方法：

定义接口

export interface SelectListItem {
 value: string;
 text: string;
 checked: boolean;
}

填写列表

export class AppComponent  {
 name = 'Angular 6';

 selectList: SelectListItem[] = [];

 ngOnInit(): void {
  this.selectList.push({ value: '1', text: 'item 1', checked: false });
  this.selectList.push({ value: '2', text: 'item 2', checked: false });
  this.selectList.push({ value: '3', text: 'item 3', checked: true });
  this.selectList.push({ value: '4', text: 'item 4', checked: true });
  this.selectList.push({ value: '5', text: 'item 5', checked: true });
  this.selectList.push({ value: '6', text: 'item 6', checked: false });
 }

resetCheckBox() {
 this.selectList.forEach(item => {
   const foundIndex = this.selectList.findIndex(x => x.value === item.value);
   item.checked = false;
   this.selectList[foundIndex] = item;
 });
}

}

，最后在您的component.html中：

            <table class="table">
            <thead>
                <tr>
                    <th>
                        <input type="button" value="Clear" (click)="resetCheckBox()" class="btn btn-sm btn-primary" />
                    </th>
                </tr>
            </thead>
            <tbody>
                    <tr *ngFor="let item of selectList; let i=index;">
                        <td>
                            <input class="form-check-input" name="off" type="checkbox" [(ngModel)]="item.checked">
                            <label class="form-check-label">
              {{item.text}}
            </label>
                        </td>
                    </tr>
            </tbody>
        </table>

demo

Answer 3

这是在Angular 7中使用ngModel的两种方式绑定到数组的方法。我正在使用mat-checkbox，但如果使用本机“ input type =“ checkbox””，它应该也可以正常工作。

模板：

checkedarray: boolean[];

ngOnInit() { 
    this.checkedarray = [];
...
}

clearSelected() {
    this.checkedarray = [];
}

打字稿：

<div *ngFor="let item of myitems; index as i; ">

    <mat-checkbox [(ngModel)]="checkedarray[i]" id={{item.id}}  
     (change)="selectItem($event)"> </mat-checkbox>
</div>

就是这样。如果您想在更改复选框时执行某项操作，则可以添加如下所示的事件函数：如果id =不存在，Angular将自动生成一个事件函数。

模板：

selectItem(event) {    

    let id = event.source.id;
    let checked = event.checked;

    ... do whatever
}

打字稿：

{{1}}

您可以在此处找到mat-复选框的详细信息：

https://material.angular.io/components/checkbox/overview

取消选中所有用* ngFor创建的复选框

3 个答案: