*ngIf binding with <div> is not working properly


#1

I’m saving checkbox values on firebase database and fetching it to show last checked values on screen. Fetching title and location from api and checkbox values from firebase but unable to bind them accordingly. I’m fetching data correctly from firebase but unable to put correctly on page.

home.html

 <button class="listItem" ion-item *ngFor="let h of hunts | slice:0:23; let i=index">
            <h3>{{h.title}}</h3>
            <p>{{h.location}}</p>
            <div item-end *ngIf="myVar == false">
                <ion-item style="width: 55px; background: #24252D !important;">
                    <ion-checkbox checked="false" [(ngModel)]="completed[i]" (ionChange)="updateHunt(completed)" ></ion-checkbox>
                </ion-item>
            </div>

            <div item-end *ngIf="myVar == true">
                <ion-item style="width: 55px; background: rgb(29, 29, 34) !important;">
                    <ion-checkbox checked="true" [(ngModel)]="completed[i]" (ionChange)="updateHunt(completed)" ></ion-checkbox>
                </ion-item>
            </div>
        </button>

Home.ts

//: JSON Data Request
 this.http.get('https://api.myjson.com/bins/o18tj').map(res => res.json())
            .subscribe(data => {

                    //: Gets Json data
                    this.hunts = data.data;

                    //: Checkbox model gets length of array.
                    this.completed = new Array(this.hunts.length);

                    loading.dismiss(data.data);

                },
                err => {
                    loading.dismiss();
                    console.log('HTTP GET ERROR: ', err);
                }
            );

        //: Firebase reference to where the checkbox data is saved
        // for some reason this is not working: .child(firebase.auth().currentUser.uid), it gives me error whrn adding it to thr end of ref().
        for(let i=0; i<5; i++){
            let userHuntRef = firebase.database().ref('/CompletedHuntsQuest').child('vOpO5chW98UIovTwpg3KMTGaOoj2').child('Hunts').child('complete');
            userHuntRef.on('value', completedHunt => {
                this.userHunt = completedHunt.val()[i];
                if(this.userHunt == true){
                    this.myVar = true;
                    console.info("Firebase Values: "+i, this.userHunt);
                    console.info("Firebase Var: "+i, this.myVar);
                }else{
                    this.myVar = false;
                    console.info("Firebase Values: "+i, this.userHunt);
                    console.info("Firebase Var: "+i, this.myVar);
                }
            })
        }

Regards,
Ayub


#2

You’re better off using Firestore and AngularFire2.


#3

Thanks Sir and any suggestion, any solution about this situation i’m facing !! It’ll be very helpful for me


#4

@ayrunschaefer

 <div item-end *ngIf="!myVar">
                <ion-item style="width: 55px; background: #24252D !important;">
                    <ion-checkbox checked="false" [(ngModel)]="completed[i]" (ionChange)="updateHunt(completed)" ></ion-checkbox>
                </ion-item>
            </div>
 
<div item-end *ngIf="myVar">
                <ion-item style="width: 55px; background: #24252D !important;">
                    <ion-checkbox checked="false" [(ngModel)]="completed[i]" (ionChange)="updateHunt(completed)" ></ion-checkbox>
                </ion-item>
            </div>

Try with above conditions.see it may help you…


#5

Sorry sir, I tried your way but no luck :frowning:


#6

@ayubIonicpro

I think there is issue with getting data with firebase.I don’t have experience with ionic2 and firebase…

See below link may be it helps…