How to use *ngFor in ion-item so that each has an individual functionality

Question

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".

Answer 1

<ion-content padding>
  <ion-list>
<div *ngFor="let bullet of bulletRef">
    <ion-item >
      <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>
</div>
  </ion-list>

</ion-content>

Use Like this i think it should work

Answer 2

I think change your html to ng-template then everything ok.

<ion-item>
    <ng-template ngFor let-item [ngForOf]="bulletRef | async">
         <ion-label>{{item.description}}</ion-label>
         <ion-checkbox *ngIf="item.checked == true" color="pink" disabled="true" checked="true"></ion-checkbox>
         <ion-checkbox *ngIf="item.checked == false" color="pink" [(ngModel)]="cucumber" (ionChange)="updateCucumber(item.$key==item.description)"></ion-checkbox>
    </ng-template>
</ion-item>