Изменить логическое значение в массиве в представлении Угловое 2

Question

У меня есть следующий массив в моем компоненте:

checkBox = [ 
     {label: 'SSN', name:'ssn', value: '1', checked:false}, 
     {label: 'Last Name', name:'lastName', value: '2', checked:false}, 
     {label: 'Role', name:'role', value: '3', checked:false}, 
     {label: 'UserId', name:'userId', value: '4', checked:false}, 
     {label: 'Office', name:'office', value: '5', checked:false}, 
     {label: ' Include Subordinates', name:'subordinates', value: '6', checked:false} 
    ]; 

У меня есть несколько флажков с моей точки зрения, которые выглядят так:

<span class="input-group-addon"> 
      <input type="checkbox" name="ssn" (change)="checkBox[0].checked"> 
     </span> 

и

<span class="input-group-addon"> 
      <input type="checkbox" name="lastName" (change)=checkBox[1].value> 
     </span> 

и т.д ....

Однако, когда я это кнопка отправки:

<button type="submit" (click)="search(checkBox)" class="btn btn-default btn-md left-button">Search</button>

я получаю выход ложный в компоненте, даже если он один выбран, и я получаю только одно ложных не 6 (они 6 флажков)

я предполагал, я хотел бы получить false, false, True, False, False, False, потому что мне нужно знать, какой установлен флажок

public search(e){ 

     for (let index = 0; index < e.length; e++){ 
      console.log(e[index].checked) 
     } 

    } 

полный код:

<form> 
     <div class="col-lg-6 col-lg-offset-3 text-center bordered"> 
      <div class=" col-xs-6 "> 
       <div class="row"> 
        <div class="col-md-12 box-content right"> 
         <div class="input-group"> 
     <span class="input-group-addon"> 
      <input type="checkbox" name="ssn" (change)="checkBox[0].checked=!checkBox[0].checked"> 
     </span> 
          <span class="input-group-addon"> 
      <label>{{checkBox[0].label}}</label> 
     </span> 
          <input #ssn type="password" name="ssnText" class="form-control" placeholder=" "> 
         </div> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-md-12 box-content right"> 
         <div class="input-group"> 
     <span class="input-group-addon"> 
      <input type="checkbox" name="lastName" (change)="checkBox[1].checked=!checkBox[1].checked"> 
     </span> 
          <span class="input-group-addon"> 
      <label>{{checkBox[1].label}}</label> 
     </span> 
          <input type="text" #lastName name="lastNameTest" class="form-control" placeholder=""> 
         </div> 
        </div> 
       </div> 


       <div class="row"> 
        <div class="col-md-12 box-content right"> 
         <div class="input-group"> 
     <span class="input-group-addon"> 
      <input type="checkbox" name="role" (change)="checkBox[3].checked=!checkBox[3].checked"> 
     </span> 
          <span class="input-group-addon"> 
      <label>{{checkBox[2].label}}</label> 
     </span> 
          <input type="text" #role name="roleText" class="form-control" placeholder=" "> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div class=" text-center col-xs-6"> 
       <div class="row"> 
        <div class="col-md-12 box-content "> 
         <div class="input-group"> 
     <span class="input-group-addon"> 
      <input type="checkbox" name="userId" (change)="checkBox[4].checked=!checkBox[4].checked"> 
     </span> 
          <span class="input-group-addon"> 
      <label>{{checkBox[3].label}}</label> 
     </span> 
          <input type="text" #userId name="userIdText" class="form-control" placeholder=" "> 
         </div> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-md-12 box-content "> 
         <div class="input-group"> 
     <span class="input-group-addon"> 
      <input type="checkbox" value="{{checkBox[4].value}}"> 
     </span> 
          <span class="input-group-addon"> 
      <label for="office">{{checkBox[4].label}}</label> 
     </span> 
          <input type="text" #office id="office" name="officeText" class="form-control" placeholder=" "> 
         </div> 
        </div> 
       </div> 

       <div class="row"> 
        <div class="col-md-12 box-content "> 
         <div class="input-group"> 
     <span class="input-group-addon"> 
      <input type="checkbox" #subordinates name="subText" (change)="checkBox[5].checked=!checkBox[5].checked"> 
     </span> 
          <span class="input-group-addon"> 
      <label>Include Subordinates</label> 
     </span> 
         </div> 
        </div> 
       </div> 
      </div> 

      <div class="center-block"> 
       <button type="submit" (click)="search(checkBox)" class="btn btn-default btn-md left-button">Search</button> 
       <button type="submit" class="btn btn-default btn-md right-button">Reset</button> 
      </div> 
     </div> 
    </form> 

Answer 1

Я не вижу, где бы вы изменили значение для проверяемых значений? Вы должны использовать либо [(ngModel)] или сделать

(change)="checkbox[index].checked=!checkbox[index].checked" 

Если вы оказываете свои флажки с *ngFor:

<span class="input-group-addon" *ngFor="checkBoxElem of checkBox"> 
    <label>{{checkBoxElem.label}}</label> 
    <input type="checkbox" name="checkBoxElem.name" [(ngModel)]="checkBoxElem.checked"> 
</span> 

Чтобы разрешить только один флажок, чтобы выбрать сразу (просто идею, может быть очиститель раствор):

<span class="input-group-addon" *ngFor="checkBoxElem of checkBox"> 
    <label>{{checkBoxElem.label}}</label> 
    <input type="checkbox" name="checkBoxElem.name" [(ngModel)]="checkBoxElem.checked" (change)="uncheckOtherCheckboxes(checkBoxElem.value)"> 

и ваш component.ts:

public uncheckOtherCheckboxes(valueToKeep:number){ 
    this.checkBox.forEach(checkBoxElem => { 
     if(checkBoxElem.value !== valueToKeep && checkBoxElem.checked){ 
     checkBoxElem.checked = false; 
     } 
    }); 
} 

Answer 2

Попробуйте это:

public search(e){ 
    for (let index = 0; index < e.length; index++){ 
     console.log(e[index].checked) 
    } 
}