javascript - angular 2复选框选择全部

Question

问题

我在寻找这个问题的答案，但我仍然卡住了我有一个多行的表，每行都有一个复选框，我需要一个复选框来选择所有和取消选择所有，这里有一些示例代码

模板

<table class="table table-bordered table-condensed table-striped table-hover">
<thead>
    <tr>
        <th></th>
        <th>Size</th>
        <th>Diameter</th>
        <th class="text-center">
            <input type="checkbox" name="all" (change)="checkAll($event)"/>
        </th>
    </tr>
</thead>
<tbody>
    <tr *ngFor="let size of sizes | async ; let i = index">
        <td class="text-right">{{i + 1}}</td>
        <td class="text-right">{{size.size}}</td>
        <td>{{size.diameter}}</td>
        <td class="text-center">
            <input type="checkbox" name="sizecb[]" value="{{size.id}}"/>
        </td>
    </tr>
</tbody>

组件

    export class ListSizeComponent implements OnInit {
    constructor () {
    }

    sizes: any;

    setSizes() {
        this.sizes = [
            {'size': '0', 'diameter': '16000 km'},
            {'size': '1', 'diameter': '32000 km'}
        ]
    }

    checkAll(ev) {
        if (ev.target.checked) {
            console.log("True")
        } else {
            console.log("False");
        }
    }

    ngOnInit(): void {
        this.setSizes();
    }
}

Answer 1

您可以利用 ngModel 来做到这一点。

模板:

<input type="checkbox" name="all" [checked]="isAllChecked()" (change)="checkAll($event)"/>
....
<input type="checkbox" name="sizecb[]" value="{{size.id}}" [(ngModel)]="size.state"/>

组件:

checkAll(ev) {
  this.sizes.forEach(x => x.state = ev.target.checked)
}

isAllChecked() {
  return this.sizes.every(_ => _.state);
}

Stackblitz Example