Как удалить выбранные или все флажки в угловых 5

Question

Это мой HTML, где у меня есть список элементов с флажками и глобальными флажками для выбора всех флажков. После нажатия на кнопку удаления я смогу удалить выбранные или все выбранные флажки.

  <label (click)="delete()"> Delete these <button class="deletebutton">Delete</button></label>                 

  <ul>
      <input type="checkbox" (change)="usertodelete = $event.target.checked"/> // global checkbox to select all checkboxes

   <li *ngFor= "let user of users">
         <span>
             <input type="checkbox" [(ngModel)] ="usertodelete"/>
                   <label>{{user}}</label>
         </span>
       </li>
 </ul>

Это мой компонент

export class GroupComponent implements OnInit {
usertodelete: boolean =true;
  ngOnInit() {
      this.service.getGroupMembers().subscribe(data => {this.users = JSON.parse(data.data.items);
       } );      
  }

  delete(selectedUser:any) {  
    if(this.usertodelete) {
      this.memberstobedeleted =  this.users.slice(selectedUser);
      this.service.remove(this.memberstobedeleted);
    }
    }

Это мой сервис:

  remove(remove:any) {
    this.body = {
      "UserId":"abf"
     }
    return this.http.put('url'+remove, this.body,{headers :new HttpHeaders({'Content-Type':'application/json'})}
    ).subscribe((res:Response)=>{console.log(res)});
  }

Answer 1

Вы можете изменить саму модель.

Упрощение:

Допустим, у вас есть массив из 3 элементов, в котором он имеет значение и свойство c для "флажка":

 data = [{ id: 1, c: true }, { id: 2, c: false }, { id: 3, c: true }]

Разметка HTML будет выглядеть так:

<p>
    <br/>

   <input type="checkbox"  *ngFor= "let item of data"   [(ngModel)]="item.c"/>
    <input  type="button" value="clear all" (click)="delete($event)"/>

<br/>
{{ data | json}}
</p>

Функция delete будет выглядеть так:

  delete() {
    this.data.forEach(cb => cb.c = false)
  }

То есть вы в основном меняете саму модель.

NG-пробег