I make an application using Ionic and Firebase. The database in Firebase successfully run when run in ionic lab or ionic serve. See the picture, prove it when the database changed.
But, when i run in Emulator (Nox that i used) or My device, the database Can’t run as in ionic serve. See the picture, prove the database not changed.
Here my TypeScript
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Item } from '../../models/lamp/lamp.model';
import { LampServices } from '../../services/lamp/lamp.services';
import { Observable } from 'rxjs/Observable';
@IonicPage()
@Component({
selector: 'page-turn-lamp',
templateUrl: 'turn-lamp.html',
})
export class TurnLampPage {
lamp$: Observable<Item[]>;
item: Item;
constructor(
public navCtrl: NavController,
public navParams: NavParams,
private lampS: LampServices
) {
this.lamp$ = this.lampS
.getLamp()
.snapshotChanges()
.map(
changes => {
return changes.map(c => ({
key: c.payload.key, ...c.payload.val()
}))
}
)
}
turnLamp(item: Item){
this.lampS.turnLamp(item);
}
}
Here the Service of getLamp() and turnLamp()
import { Injectable } from "@angular/core";
import { AngularFireDatabase } from "angularfire2/database";
import { Item } from "../../models/lamp/lamp.model";
@Injectable()
export class LampServices{
private lampRef = this.db.list<Item>('lamp');
constructor(private db: AngularFireDatabase){}
getLamp(){
return this.lampRef;
}
addLamp(item: Item){
return this.lampRef.push(item);
}
turnLamp(item: Item){
return this.lampRef.update(item.key, item);
}
}
Here how i call the function in HTML
<ion-item *ngFor="let item of lamp$ | async">
<ion-label>Condition</ion-label>
<ion-toggle [(ngModel)]="item.condition" (click)="turnLamp(item)"></ion-toggle>
</ion-item>
Is it a bug? or is there any error on my code?
Thanks before.