火災ベースのIonic 3アプリ - firebaseリストを編集して観測ページに正しく表示させる方法

Question

私は実際にイオンアプリから情報を編集してfirebaseに更新する方法を考え出しましたが、私のリストから現在の情報をどのように観測可能かを把握し、それをイオン入力フィールドに表示しようとしています。編集したい項目をクリックすると編集ページが開き、イオン入力フィールドには編集可能な最新の情報が表示されます。

はここにここに私の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> 

あなたは私のfirebaseデータベースの構造を見ることができるである私の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(); 
} 

} 

です。すべてのユーザーにuser.uidが与えられ、すべてのデータがその中に置かれます。私はそれが問題だとは思いますが、私は確信していません。したがって、TO DOのリスト、次にuser.id、個々の項目ID。

任意の提案ですか？あなたは、単にasyncパイプを通すテンプレートに直接todoDataRef$プロパティを使用する場合、どのよう

Answer 1

、

<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> 

コンポーネント

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(); 
}