Как снять все отмеченные флажки в угловых 6

Question

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

Я хочу снять флажок после того, как я сохранил массив. Пожалуйста, помогите мне найти решение. Спасибо.

Stackblitz ссылка здесь

файл 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-файл:

<code><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}}

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)

        }
    }

Unchek All Roles



  

  
      {{appUserRole.roleName}}
   



Uncheck All

{{ userRoleListTemp | json}}

Answer 2

почему бы не использовать [(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)
  }

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

Первая ошибка, которую вы сделали, вы добавляете событие (change) по нажатию кнопки.Замените его на (click) как событие изменения, если для свойств типа ввода, и вы можете использовать его только с ngModel .

Вы должны добавить 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 цикл нажатия кнопки, хотя appUserRoleList и установите isChecked = false.

Вот рабочий пример .