单击复选框后,如何将之前的所有复选框设置为在angular 4中选中

更新Gobli的答案

组成部分

selectedCheckbox = 0;
k = 0;

public changeCheckbox(i) {
 debugger;
 this.selectedCheckbox = i;
 var elem = <HTMLInputElement>event.target;
 if(elem.checked){
   this.k=1;
   elem.checked = true;  
 }else{
   this.k=0;
   elem.checked = false; 
 }
} 

Html

<div class="cb-cont" *ngFor = "let circle of [1,2,3,4], let i = index;"   >
  <input type="checkbox" class="cb" [attr.id]="'vacancy' + i" 
 (change)="changeCheckbox(i)" [checked]="(k==1) ?( (i<=selectedCheckbox) ? true : false ) :( (i>=selectedCheckbox) ? false : true ) "  >
    <label [attr.for]="'vacancy' + i" ><i class="xico-completed"></i> 

希望这对你有帮助。 https://angular-2hh27h.stackblitz.io/

您可以存储所选复选框的索引,并选择之前的所有复选框。这样地:

<div class="cb-cont" *ngFor = "let circle of [1,2,3,4], let i = index;"   >
    <input type="checkbox" class="cb" [attr.id]="'vacancy' + i" (change)="changeCheckbox(i)" [checked]=" (i<=selectedCheckbox) ? true : false"  >
        <label [attr.for]="'vacancy' + i" ><i class="xico-completed"></i></label>
</div>

在控制器中:

  selectedCheckbox = 0;
  public changeCheckbox(i) {
    this.selectedCheckbox = i;
    var elem = <HTMLInputElement>event.target;
    elem.checked = true;  
  } 

这里有一个可用的stackblitz代码: https://stackblitz.com/edit/angular-a29qko

组成部分

private checked: number = 0;

changeCheckbox(index, e) {
    if (index === 0) {
        e.target.checked = true;
        this.checked = 0;
        return;
    }

    if (e.target.checked) {
        if ((this.checked+1) === index) {
            this.checked = index;
        }else {
            e.target.checked = false;
        }
    } else {
        e.target.checked = true;
        this.checked = index;
    }
}

getChecked(i) {
    return (i <= this.checked);
}

HTML

 <div class="cb-cont" *ngFor = "let circle of [1,2,3,4], let i = index;"   >
        <input type="checkbox" class="cb" [attr.id]="'vacancy' + i" (change)="changeCheckbox(i, $event)" [checked]="getChecked(i)"  >
            <label [attr.for]="'vacancy' + i" ><i class="xico-completed"></i></label>
    </div>