如何选择角度2中的所有复选框？答案

【问题标题】：How to select all checkbox in angular 2?如何选择角度2中的所有复选框？
【发布时间】：2018-09-07 10:46:23
【问题描述】：

<div class="col-2">
  <label class="myButton btn btn-default"><input  type="checkbox" [checked]="selectAllCheckbox" (click)="selectAll()"> Select All</label>
</div>
<div class="row">
  <div class="col-2" *ngFor="let user of Users; let idx = index">
    <label><input [checked]="item._selected" (click)="updatedUserList(user, $event)" type="checkbox"> {{user}}</label>
  </div>
</div>

users = ["users1", "users2", "users3"]

【问题讨论】：

标签： angular

【解决方案1】：

它是 Angular 2 中的一种解决方法，您可以参考下面的代码 HTML

<ul>
  <li> <input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll();"/>
  </li>
  <li *ngFor="let n of names"> 
  <input type="checkbox" [(ngModel)]="n.selected" (change)="checkIfAllSelected();">
  {{n.name}}
  </li>
</ul>

组件

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title: String;
  names: any;
  selectedAll: any;
  constructor() {
    this.title = "Select all/Deselect all checkbox - Angular 2";
    this.names = [
      { name: 'Prashobh', selected: false },
      { name: 'Abraham', selected: false },
      { name: 'Anil', selected: false },
      { name: 'Sam', selected: false },
      { name: 'Natasha', selected: false },
      { name: 'Marry', selected: false },
      { name: 'Zian', selected: false },
      { name: 'karan', selected: false },
    ]

  }
  selectAll() {
    for (var i = 0; i < this.names.length; i++) {
      this.names[i].selected = this.selectedAll;
    }
  }
  checkIfAllSelected() {
    this.selectedAll = this.names.every(function(item:any) {
        return item.selected == true;
      })
  }
}

【讨论】：

工作正常，谢谢
当数据来自 API 请求时，此方法将不起作用。

【解决方案2】：

在你的 html 中

   <div *ngFor="let user of Users">
      <input type="checkbox" [(ngModel)]="user.selected" (change)="ToggleChb();">
   </div>

在打字稿组件中

   ToggleChb(state:boolean){
     this.Users.forEach(user=> user.selected = state)
   }

【讨论】：