角2：多个复选框切换

Question

我有这样

<input type="checkbox" [checked]="chk1" (change)="chk1 = !chk1" />chk1 &nbsp; 
<input type="checkbox" [checked]="chk2" (change)="chk2 = !chk2" />chk2 &nbsp; 
<input type="checkbox" [checked]="chk3" (change)="chk3 = !chk3" />chk3 &nbsp; 
<input type="checkbox" [checked]="chk4" (change)="chk4 = !chk4" />chk4 &nbsp; 
<input type="checkbox" [checked]="chk5" (change)="chk5 = !chk5" />chk5 &nbsp; 

我试图切换复选框5个复选框。如果选择第一个复选框条件为─

，所有其他的4个复选框应选中，反之亦然（即使只有第二和第三框都被选中）

第三和第四复选框必须切换到对方。

我如何在Angular中实现这一点？

Plunker link

Answer 1

为了解决这个问题，你可以创建一个复选框列表：

<div *ngFor="let cb of checkboxes"> 
     <input 
      type="checkbox" 
      [checked]="cb.value" 
      (change)="onCheck(cb)" 
      /> 
     <span [innerHtml]="cb.name"></span> 
    </div> 

整个选中/清除：

checkboxes = [ 
    { 
     id: 'cb1', 
     name: 'Special (not combinable)', 
     value: false 
    }, 
    { 
     id: 'cb2', 
     name: 'Example' 
     value: true 
    }, 
    { 
     id: 'cb3', 
     name: 'Another one' 
     value: false 
    }, 
    { 
     id: 'cb4', 
     name: 'Toggle 1' 
     value: false 
    }, 
     { 
     id: 'cb5', 
     name: 'Toggle 2' 
     value: false 
    } 
    ] 

然后在模板中，您可以通过此列表迭代逻辑可以包含在onCheck方法中：

onCheck(selected) { 

    let id = selected.id; 
    let newValue = !selected.value; 

    switch(id) { 
     case 'cb1': 
     if (newValue) { 
      this.checkboxes = this.checkboxes.map(cb => { 
      if (cb.id === id) { 
       // set new value 
       cb.value = newValue 
      } else { 
       if (newValue) { 
       // uncheck checkbox 1-4 if checkbox 1 is checked 
       cb.value = false; 
       } 
      } 
      return cb; 
      }) 
     } 
     break; 

     case 'cb2': 
     case 'cb3': 
     case 'cb4': 
     case 'cb5': 
      this.checkboxes = this.checkboxes.map(cb => { 
      // uncheck checkbox 1 
      if (newValue && cb.id === 'cb1') { 
       cb.value = false; 
      } 

      // set new value 
      if(cb.id === id) { 
       cb.value = newValue; 
      } 

      // toggle checkbox 4/checkbox 5 
      if (['cb4', 'cb5'].indexOf(id) > -1 && ['cb4', 'cb5'].indexOf(cb.id) > -1 && cb.id !== id) { 
       cb.value = !newValue; 
      } 

      return cb; 
      }) 
      break; 
    } 

    } 

我希望这有助于解决您的问题。一个完整的实例是here