невозможно выбрать все проверки на ngonit, используя угловые

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();

    }

ниже мой стек блиц-URL

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

Answer 1

<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 + i}} value="{{size.id}}" 
                    (change)="sizes[i].state = !sizes[i].state" [checked]="size.state" [(ngModel)]="size.state"/>
            </td>
        </tr>
    </tbody>
  </table>
</div>

  and in ts
  try this array

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

Answer 2

ваш код работает нормально. отсутствует то, что у вас нет ключа state: true в вашем определенном массиве. вот почему он не устанавливает все флажки.

попробуйте этот массив

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