Why does this for loop cycle through elements not specified?


#1

I’m creating a checklist with items and subitems. I have a button to reset all checkboxes and I need to check if the items are all checked, but NOT the subitems.

But my checking code logs ALL the checklist boxes, not just the items.

Here is the template:

<ion-list>
      <ion-item *ngFor='let listitem of checkdetail.contents; let i=index'>
        <ion-label class="mainitem" *ngIf="listitem.flavour === 'item'" text-wrap>{{listitem.content}}</ion-label>
        <ion-checkbox color="primary" checked="false" *ngIf="listitem.flavour === 'item'" [(ngModel)]="item_ticks[i]" (ionChange)="updateTicks()"></ion-checkbox>
  
        <ion-label class="subitem" *ngIf="listitem.flavour === 'subitem'" text-wrap>{{listitem.content}}</ion-label>
        <ion-checkbox color="secondary" checked="false" *ngIf="listitem.flavour === 'subitem'" [(ngModel)]="subitem_ticks[i]" ></ion-checkbox>
      </ion-item>
    </ion-list>

And here is the code:

item_ticks = [];
	subitem_ticks = [];

    updateTicks() {
	    for(var item of this.item_ticks){
	    	console.log(item);
	    }
	}

  	resetTicks() {
		let alert = this.alertCtrl.create({
		    title: 'Reset?',
		    message: 'Are you sure?',
		    buttons: [
		      {
		        text: 'Cancel',
		        role: 'cancel',
		        handler: () => {
		          console.log('Cancel clicked');
		        }
		      },
		      {
		        text: 'Reset',
		        handler: () => {
		          	for (var i = 0; i < this.item_ticks.length; i++){
		    			this.item_ticks[i] = false;
		    		}	
		    		for (var i = 0; i < this.subitem_ticks.length; i++){
		    			this.subitem_ticks[i] = false;
		    		}
		    		let toast = this.toastCtrl.create({
				      message: 'Checklist reset',
				      duration: 1000,
				      position: 'top'
				    });
				    toast.present();
		        }
		      }
		    ]
		  });
		  alert.present();
	}

Why does the loop in updateTicks() log out both the this.item_ticks AND this.subitem_ticks?