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

如何删除角度5中的所选或所有复选框

1 个答案: