Question

我有一个动态数据列表，每个元素都显示为一个复选框。我检查的元素保存在数组中。保存阵列后，我希望在按下按钮时取消选中所有选中的复选框，但这是行不通的。

保存阵列后，我想取消选中选中的复选框。请帮助我找到解决方案。谢谢。

ts文件：

export class AppComponent  {
 userRoleListTemp: any = [];
 userRoleListToSave: any = [];
 checkedInfo: any;

 appUserRoleList: any = [
    {id: '1', roleName: 'SETUP_ROLE'},
    {id: '2', roleName: 'ENTRY_ROLE'},
    {id: '3', roleName: 'SEATPLAN_ROLE'},
    {id: '4', roleName: 'MARKSENTRY_ROLE'},
    {id: '5', roleName: 'APPLICANT_ROLE'}
 ];

 constructor() {}

 onChangeRole(userRole: string, isChecked) {
    this.checkedInfo = isChecked;
    if (isChecked.target.checked) {
        this.userRoleListTemp.push(userRole);
    } else {
        let index = this.userRoleListTemp.indexOf(userRole);
        this.userRoleListTemp.splice(index, 1);
    }
  }

  checkedEvnt() {
    this.checkedInfo.target.checked = false;
  }

}

html文件：

<h1>Unchek All Roles</h1>

 <div class="form-check" *ngFor="let appUserRole of appUserRoleList">

 <input class="form-check-input" name="{{appUserRole.roleName}}" 
   type="checkbox" id="{{appUserRole.roleName}}" 
   (change)="onChangeRole(appUserRole.roleName, $event)">

 <label class="form-check-label" for="{{appUserRole.roleName}}">
  {{appUserRole.roleName}}
 </label> 

</div>
<button (change)="checkedEvnt()">Uncheck All</button>

<pre>{{ userRoleListTemp | json}}</pre>

Answer 1

这里是链接https://stackblitz.com/edit/angular-me1cdb?file=src/app/app.component.html

我正在使用isChecked标志，它将为您提供帮助

 appUserRoleList: any = [
        {id: '1', roleName: 'SETUP_ROLE',isChecked:false},
        {id: '2', roleName: 'ENTRY_ROLE',isChecked:false},
        {id: '3', roleName: 'SEATPLAN_ROLE',isChecked:false},
        {id: '4', roleName: 'MARKSENTRY_ROLE',isChecked:true},
        {id: '5', roleName: 'APPLICANT_ROLE',isChecked:false} 
    ];


    onChangeRole(userRole: string, isChecked) {
        this.checkedInfo = isChecked;
         for(var i=0;i<this.appUserRoleList.length;i++ ){
           if( this.appUserRoleList[i].roleName==userRole){

          this.appUserRoleList[i].isChecked=!this.appUserRoleList[i].isChecked;
           }
        }
    }

    checkedEvnt() {
        for(var i=0;i<this.appUserRoleList.length;i++ ){
          this.appUserRoleList[i].isChecked=false;
                    console.log(this.appUserRoleList[i].isChecked)

        }
    }

<h1>Unchek All Roles</h1>

<div class="form-check" *ngFor="let appUserRole of appUserRoleList">

  <input class="form-check-input" name="{{appUserRole.roleName}}" type="checkbox" id="{{appUserRole.roleName}}" [checked]="appUserRole.isChecked" (change)="onChangeRole(appUserRole.roleName, $event)">

  <label class="form-check-label" for="{{appUserRole.roleName}}">
      {{appUserRole.roleName}}
  </label> 

</div>

<button (click)="checkedEvnt()">Uncheck All</button>

<pre>{{ userRoleListTemp | json}}</pre>

Answer 2

您犯的第一个错误是您在点击按钮时添加了Replace事件。如果是输入类型属性，则将其替换为input = input.Replace(" ", "");作为更改事件，并且只能与ngModel一起使用。

您应该在(change)列表中添加(click)属性，这将有助于您选中/取消选中复选框。试试这个：

isChecked

在appUserRoleList按钮上的单击通过appUserRoleList: any = [ {id: '1', roleName: 'SETUP_ROLE', isChecked: true}, {id: '2', roleName: 'ENTRY_ROLE', isChecked: false}, {id: '3', roleName: 'SEATPLAN_ROLE', isChecked: true}, {id: '4', roleName: 'MARKSENTRY_ROLE', isChecked: true}, {id: '5', roleName: 'APPLICANT_ROLE', isChecked: true} ];并设置Uncheck All。

这是工作中的example。

Answer 3

使用模板变量来保留复选框：

<input #checkboxes class="form-check-input" name="{{appUserRole.roleName}}" type="checkbox" id="{{appUserRole.roleName}}" (change)="onChangeRole(appUserRole.roleName, $event)">

然后使用@ViewChild在组件中保留所有ElementRef，并通过将checked属性设置为false进行处理：

@ViewChildren("checkboxes") checkboxes: QueryList<ElementRef>
checkedEvnt() {
         this.checkboxes.forEach((element) => {
              element.nativeElement.checked = false;
              this.userRoleListTemp.length = 0;
    });
}

这是您修改的StackBlitz

Answer 4

为什么不使用[（ngModel）]？不（更改），不拆分。保持代码简单。参见stackblitz

<div class="form-check" *ngFor="let appUserRole of appUserRoleList">

  <input #inputs class="form-check-input" name="{{appUserRole.roleName}}" type="checkbox" id="{{appUserRole.roleName}}" [(ngModel)]="appUserRole.checked">

  <label class="form-check-label" for="{{appUserRole.roleName}}">
      {{appUserRole.roleName}}
  </label> 

</div>

要获得数组，我喜欢吸气剂

  get userRoleListTemp()
  {
    return this.appUserRoleList.filter(x=>x.checked).map(u=>+u.id)
  }

如何取消选中Angular 6中所有选中的复选框

ts文件：

html文件：

4 个答案: