如何选择角度 6 中的所有复选框？

Question

我的打字稿代码如下。

  selectedAll: any;
 selectedAllSecondname: any;

 this.name = [ {name: 'as', value: 'as', selected: false },
                {name: 'bs', value: 'bs', selected: false },
                {name: 'cs', value: 'cs', selected: false } ];
 this.Secondname = [ {name: 'dd', value: 'dd', selected: false },
                {name: 'ee', value: 'ee', selected: false },
                {name: 'ff', value: 'ff', selected: false } ];
 this.Thirdname = [ {name: 'gg', value: 'gg', selected: false },
                {name: 'hh', value: 'hh', selected: false },
                {name: 'ii', value: 'ii', selected: false } ];

  selectAll(){
    for(var i=0; i < this.name.length; i++) {
       for(var j=0; j < this.Secondname.length; j++) {
          this.name[i].selected = this.selectedAll;
          this.Secondname[j].selected = this.selectedAllSecondname;
       }
     }
  }

 checkIfAllSelected(){

    this.selectedAll = this.names.every(function (item: any) {
       this.checkIfAllSecondnameSelected();
       return item.selected == true;
    })
   }

因此，对于我已声明的每个列表，我都有相同的函数，但名称不同。

  My html:

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

 <li><input type="checkbox" [(ngModel)] = "selectedAll" (change) = "selectAllSecondname();">Select All </li>
  <li *ngFor = "let d of Secondname">
      <input type="checkbox" [(ngModel)]="d.selected" (change)="checkIfAllSecondnameSelected()">
     {{ d.name }}
   <li>

所以这里我想做的是，如果我点击全选，我需要选中页面中的所有其他复选框。但它只检查名字而不是第二名和第三名。

谁能告诉我哪里出了问题以及如何纠正？

原文由 Priyanka 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用以下示例

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>

TS

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

原文由 Sujeith Gopi Nath 发布，翻译遵循 CC BY-SA 4.0 许可协议