视图角一个数组中更改布尔值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) 
    } 
}