CODEWITHSUNDEEP
angulartypescriptionic-framework
Benpeterscode
Benpeterscode

Reputation: 93

Ionic 3 app with firebase - How to edit a firebase list observable and make it display correctly in edit page

So I have actually managed to figured out how to edit information from my ionic app and update it to firebase, however i'm trying to figure out how to get the current information from my list observable and display it in the ion-input fields. So when you click on an item you want to edit it opens an edit page and then in the ion-input fields it displays the current information that you can then edit.

Here is my editpage.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { AngularFireDatabase, FirebaseObjectObservable } from 
'angularfire2/database';
import { AboutPage } from '../about/about';
import { AngularFireAuth } from 'angularfire2/auth';
import { Todo } from './../../models/todo';

@IonicPage()
@Component({
selector: 'page-editpage',
templateUrl: 'editpage.html',
})
export class EditpagePage {

todoDataRef$: FirebaseObjectObservable<Todo>;
todo = {} as Todo;
 public userId;

constructor(private afAuth: AngularFireAuth, private database: 
AngularFireDatabase, public navCtrl: NavController, public navParams: 
NavParams) 
{

   const todoId = this.navParams.get('todoId');

   console.log(todoId);

   afAuth.authState.subscribe( user => {
   if (user) { this.userId = user.uid }
     this.todoDataRef$ = this.database.object(`todo/${user.uid}/${todoId}`);
   });

 }

 editTodoItem(todo: Todo){
   this.todoDataRef$.update(todo);
   this.navCtrl.pop();
 }

}

here is my editpage.html

<ion-header>

 <ion-navbar>
   <ion-title>Edit Task</ion-title>
 </ion-navbar>

</ion-header>


<ion-content padding>


<ion-item>
    <ion-label floating>Title</ion-label>
    <ion-input [(ngModel)]="todo.Title"></ion-input>
</ion-item>

<ion-item>
    <ion-label floating>Description</ion-label>
    <ion-input [(ngModel)]="todo.Desc"><textarea></textarea></ion-input>
</ion-item>


<button style="margin-top:30px;" ion-button block 
(click)="editTodoItem(todo)">Edit Task</button>

Here you can see the structure of my firebase database. For every user they are given an user.uid and then all their data is placed inside that. I believe that's the issue but im not sure. So its the TO DO list, then the user.id, then the individual item id.

enter image description here

any suggestions?

Upvotes: 0

Views: 1349

Answers (1)

amal
amal

Reputation: 3170

What if you simply use the todoDataRef$ property directly on the template passing it through the async pipe,

<ion-item>
    <ion-label floating>Title</ion-label>
    <ion-input #title [ngModel]="(todoDataRef$ | async)?.Title"></ion-input>
</ion-item>

<ion-item>
    <ion-label floating>Description</ion-label>
    <ion-input #desc [ngModel]="(todoDataRef$ | async)?.Desc"><textarea></textarea></ion-input>
</ion-item>

<button style="margin-top:30px;" ion-button block 
(click)="editTodoItem({Title: title.value, Desc: desc.value})">Edit Task</button>

component

editTodoItem(todo: any){ // type changed from Todo to 'any' just to be safe, it might work otherwise too but not quite sure
   this.todoDataRef$.update(todo);
   this.navCtrl.pop();
 }

Upvotes: 1

Related Questions