typescript - 如何删除角度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 个项目的数组，其中有一个值和用于“checked”的 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-run