0

So, I'm using firebase to store my data, so we have a realtime database;

And I'm setting a class like this:

[ngClass]="isReserved(slot) ? 'reserved-slot': 'free-slot'"

This checks an array if it exists, that array is populated in construct, and uses subscribe.

The data is updating live, if I click on an item, but if I got into firebase and delete a slot manually the class doesn't change.

So how can I make the class change in realtime too, when change is detected?

isReserved(dateTimeBusinessID) {
        if(typeof this.reservedSlots[dateTimeBusinessID] === "undefined" ) return false;
        return true;
}

This is how I populate the array on construct

private getReservedSlots() {

    this.firebase.database.list('/reservations', { query: { orderByChild: 'DateBusinessID', equalTo: this.formattedDateBusinessID } })
   .subscribe((data) => {
        if (data.length > 0) {
            for (var i = 0; i < data.length; i++) {
                var keyArray = data[i].time;
                this.reservedSlots[keyArray] = { 'class': 'false' }
            }
            console.log('changed detected');
        }
    });
}

The thing is I get "changed detected" when I manually delete data from firebase, so I guess I'm doing something wrong in the html;

Community
  • 1
  • 1
Uffo
  • 9,628
  • 24
  • 90
  • 154
  • I'm assuming that when you check the element in the DOM it doesn't have the reserved-slot or free-slot class applied to it? Just checking to see if the angular bit of updating the class works and the css is wrong instead. – flyer Aug 01 '17 at 18:21
  • Are you running `getReservedSlots` **after** you manually remove the slot from firebase? – 0mpurdy Aug 01 '17 at 18:22
  • i think it is down to `if (data.length > 0) ` instead of that just check `data` – Rahul Singh Aug 01 '17 at 18:23
  • Yeah, it works when I go to the page the right classes are there, but if I delete something from firebase, I want it also to update in realtime, so if the key doesn't exist in the array anymore it should show the "free-slot" class – Uffo Aug 01 '17 at 18:23
  • I have solved I needed to re-init this.reservedSlots in subscribe() – Uffo Aug 01 '17 at 18:26
  • When you say reinit - do you mean that it was because angular's change detection wasn't recognising it as different? Would [this answer](https://stackoverflow.com/a/45311911/6894075) on the track by function help you? – 0mpurdy Aug 01 '17 at 18:37

0 Answers0