Блог

Я использую свое приложение angular. У меня есть несколько флажков. Я хочу использовать on checkbox для выбора и снятия всех оставшихся флажков. мои данные взяты из резервной копии. Пожалуйста, объясните мне, как это реализовать.

HTML

 <ul>
  <li> <input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll();"/>
  </li>
  <li *ngFor="let n of names"> 
  <input type="checkbox" [(ngModel)]="n.checked" (click)="onChecked($event, n.test);">
  {{n.name}}
  </li>
</ul>
  

TS

 onChecked(event, value) {
   if (event.target.checked) {
     this.data.push(value);
   } else {
     const item = this.data.findIndex(x => x === value);
       this.data.splice(this.data.indexOf(item), 1);
   }
  }
  

В демо приведенном ниже коде отмечен, сняты все

  selectAll(){
      this.names.forEach(n=>{n.checked=this.selectedAll});
    }
  

или

 selectAll(){
       this.names.map(a=>a.checked=this.selectedAll);
    }
  

Если ваш selectedAll логический, вы можете просто использовать метод, подобный этому

 selectAll() {
     this.names.forEach(name => {
       name.checked = this.selectedAll;
    });
}
  

И в вашем html

 <li> <input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll($event);"/></li>
  

component.html

 <ul>
  <li> <input type="checkbox" [(ngModel)]="checkAll" (change)="selectAll(checkAll);"/> {{ checkAll ? 'Deselect All': 'Select All'}}
  </li>
  <li *ngFor="let n of names"> 
  <input type="checkbox" [(ngModel)]="n.checked" (click)="onChecked(n);">
  {{n.name}}
  </li>
</ul>
  

compoenent.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular '   VERSION.major;
  checkAll: false;
  names = [
    {
      name: 'name 1',
      checked : false
    },
     {
      name: 'name 2',
      checked : false
    },
     {
      name: 'name 3',
      checked : false
    },
     {
      name: 'name 4',
      checked : false
    }
  ];


  selectAll(checkAll) {
    if(checkAll) {
       this.names.forEach((element)=> {
      element.checked= true;
    });
    } else {
       this.names.forEach((element)=> {
      element.checked= false;
    });
    }
   
  }

  onChecked(obj) {
    const index = this.names.indexOf(obj);
    this.names[index].checked = true;
  }
}
  

Вам необходимо обновить массив

 selectAll() {
   this.names.forEach(name => name.checked = selctedAll)
   // bulk update request
}
  

вы можете выполнить запрос на массовое обновление после forEach() завершения.