視圖角一個數組中更改布爾值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) 
    } 
}