Context: I'm using Firebase Database to store list items. Currently, I am trying to display these list items with an ion-checkbox.
JSON: 
Desired functionality: Essentially, when a user clicks the checkbox, the value "checked" should turn to "true" for that INDIVIDUAL BULLET ONLY.
The error: When one box is checked, all of the other items in the list get checked off as well. I've been sitting on my butt all week trying to figure this out. How can I fix this?
Code:
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AddBulletPage } from '../add-bullet/add-bullet';
//Firebase imports
import * as firebase from "firebase";
import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
import { AngularFireAuth } from 'angularfire2/auth';
//Observable
import { Observable } from 'rxjs';
import { bullet } from '../../models/bullet.interface';
@IonicPage()
@Component({
selector: 'page-clicked-list',
templateUrl: 'clicked-list.html',
})
export class ClickedListPage {
bullet = {} as bullet;
cucumber: boolean;
selectedItem: any;
bulletRef: Observable<any[]>;
constructor(public navCtrl: NavController,
public navParams: NavParams,
private afAuth: AngularFireAuth,
private db: AngularFireDatabase,) {
this.selectedItem = navParams.get('list');
this.afAuth.authState.subscribe(data => {
this.bulletRef = this.db.list(data.uid+'/listItemsof-/'+this.selectedItem.name).valueChanges();
})
}
updateCucumber($key){
console.log('New state:'+this.cucumber);
this.selectedItem = this.navParams.get('list');
this.afAuth.authState.subscribe(data => {
this.selectedItem = this.navParams.get('list');
var usersRef = firebase.database().ref(data.uid+'/listItemsof-/'+this.selectedItem.name);
var ref = usersRef.orderByChild('checked').equalTo($key);
var select = this.selectedItem.name;
var state = this.cucumber;
ref.once('value').then(function(snap){
snap.forEach(function (childSnap) {
var pkey = childSnap.key;
console.log(pkey);
console.log(select);
firebase.database().ref(data.uid+'/listItemsof-/'+select+'/'+pkey).child("checked").set(state);
console.log('changed state');
})
});
});
}
}<ion-header>
<ion-navbar>
<ion-title class="bar">{{selectedItem.name}}</ion-title>
<style *ngIf="selectedItem.color=='#ffce4e'">
.bar {
background-color: #ffce4e;
}
</style>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
<ion-item *ngFor="let bullet of bulletRef | async">
<ion-label>{{bullet.description}}</ion-label>
<ion-checkbox *ngIf="bullet.checked == true" color="pink" disabled="true" checked="true"></ion-checkbox>
<ion-checkbox *ngIf="bullet.checked == false" color="pink" [(ngModel)]="cucumber" (ionChange)="updateCucumber(bullet.$key==bullet.description)"></ion-checkbox>
</ion-item>
</ion-list>
</ion-content>*I should note that all "bullet"s that are added to the Firebase DB, start out with a "checked" child of "false".