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.

any suggestions?

Source: AngularJS

from Angular Questions https://angularquestions.com/2017/09/28/ionic-3-app-with-firebase-how-to-edit-a-firebase-list-observable-and-make-it-display-correctly-in-edit-page/
via @lzomedia #developer #freelance #web