javascript - 无法使用 Angular 选择 ngoni 上的所有检查

Question

这里我尝试使用 ngOnit 选择所有复选框，但它正在调用该函数，并且通过单击它正在调用该函数，然后它会选择所有

.html代码

 <div>
      <h2>Hello Angular2</h2>
      <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" [checked]="isAllChecked()" (change)="checkAll($event)"/>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let size of sizes ; 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}}" [(ngModel)]="size.state"/>
                </td>
            </tr>
        </tbody>
      </table>
    </div>

.ts 代码:

  sizes: any[] = [
    { 'size': '0', 'diameter': '16000 km' },
    { 'size': '1', 'diameter': '32000 km' }
  ];

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

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

    }

下面是我的堆栈 Blitz 网址

https://stackblitz.com/edit/angular-pzvusr

Answer 1

你的代码工作正常。缺少的事情是您定义的数组中没有键 state: true 。这就是为什么它没有选择所有复选框。

试试这个数组

sizes: any[] = [
    { 'size': '0', 'diameter': '16000 km', 'state': true },
    { 'size': '1', 'diameter': '32000 km', 'state': true }
  ];