Hi everyone,
I made an aplication where I save some information on firebase. I can add user on firebase without any error. But I have some errors when I try to edit data on Firebase.
Here my aplication.
No problem when adding.
import { Component } from '@angular/core';
import { NavController, NavParams, ActionSheetController } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';
import { EdicionPage } from '../edicion/edicion';
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
arrData = [];
$key?:string;
myInputName: string;
myInputNumber: number;
usuarios:any = [];
llave = [];
union:any = {
id:"",
nombre:"",
edad: ""
};
constructor(public navCtrl: NavController,
public navParams: NavParams,
private afDB: AngularFireDatabase,
private action: ActionSheetController) {
this.afDB.list("myUsers").valueChanges().subscribe(_data =>{
this.arrData = _data;
console.log(this.arrData);
});
this.afDB.list("myUsers").snapshotChanges().subscribe(_data =>{
this.llave = _data;
console.log(this.llave);
});
}
btnAddClicked(usuarios){
console.log(usuarios);
this.afDB.list("myUsers").push(/*this.usuarios*/
{myInputName: this.usuarios.myInputName,
myInputNumber: this.usuarios.myInputNumber
});
this.usuarios.myInputName ="";
this.usuarios.myInputNumber="";
}
btnAction(i){
console.log(i);
this.action.create({
title:`${this.arrData[i].myInputName}`,
buttons: [
{text: "Editar",
handler: ()=>{
console.log(this.arrData[i].myInputName);
this.navCtrl.push(EdicionPage, {i:this.llave[i]});
}
},
{text: "Borrar",
role: "destructive",
handler: ()=>{
this.afDB.list("myUsers").remove(this.llave[i].key);
console.log(this.llave[i].key);
}
my problem is edding. Here my code:
(diferent ways to edit data)
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase } from 'angularfire2/database';
import { LoginPage } from '../login/login';
@Component({
selector: 'page-edicion',
templateUrl: 'edicion.html',
})
export class EdicionPage {
item;
arrData = [];
aEditar: any =[];
myInputName:string;
myInputNumber:string;
usuarios:any = [];
llave = [];
constructor(public navCtrl: NavController,
public navParams: NavParams,
private afDB: AngularFireDatabase) {/*
this.aEditar = afDB.list("myUsers");
this.aEditar.id = this.navParams.get('key')
this.aEditar.myInputName = this.navParams.get('myInputName')
this.aEditar.myInputNumber = this.navParams.get('myInputNumber')
*/
this.item = navParams.data.i;
console.log(this.item);
this.afDB.list("myUsers").valueChanges().subscribe(_data =>{
this.arrData = _data;
this.aEditar=(this.arrData[this.item]);
console.log(this.aEditar);
});
this.afDB.list("myUsers").snapshotChanges().subscribe(_data =>{
this.llave = _data;
console.log(this.llave);
});
}
btnEditClicked(aEditar){/*
this.afDB.list("myUsers").update(this.aEditar.id, {
myInputName = this.aEditar.myInputName,
myInputNumber = this.aEditar.Number
})*/
//this.afDB.list("myUsers").update(aEditar.key, aEditar);
//this.afDB.database.ref("myUsers/"+aEditar.llave).set(this.aEditar);
console.log(this.llave);
this.navCtrl.push(LoginPage);
}
ionViewDidLoad() {
console.log('ionViewDidLoad EdicionPage');
}
}
edit html
<ion-content padding>
<ion-item>
<ion-label floating>Nombre</ion-label>
<ion-input [(ngModel)]="aEditar.myInputName" type="text" value="{{aEditar.myInputName}}"> </ion-input>
</ion-item>
<ion-item>
<ion-label floating>Number</ion-label>
<ion-input type="number" [(ngModel)]="aEditar.myInputNumber" value="{{aEditar.myInputNumber}}"></ion-input>
</ion-item>
<button ion-button block outline item-end icon-start (click)="btnEditClicked(aEditar)" ><ion-icon name="cloud-upload"></ion-icon>Añadir a Firebase</button>
</ion-content>