FirebaseListObservableをカスタムクラスに保存

Question

Ionic 2とFirebaseを搭載した基本的なモバイルアプリケーションを構築しています。私はAngularFire2を使ってアプリケーションからfirebaseにアクセスしています。

私は1つの特定の点で苦労しています。

現在のユーザーを維持したい。だから私は、Userクラスを作成しました：私は、ユーザーに関連するすべてのアクションを実行できるようにするための

import { FirebaseListObservable } from 'angularfire2'; 
import { DatabaseService } from '../providers/database.service'; 

export class User { 

    uid: string; 
    observableList: FirebaseListObservable<any>; 

    constructor(uid: string, user: FirebaseListObservable<any>) { 
    this.uid = uid; 
    this.observableList = user; 
    } 

} 

A UserServiceの：

import { Injectable } from '@angular/core'; 

import { FirebaseListObservable } from 'angularfire2'; 

import { DatabaseService } from './database.service'; 
import { User } from '../app/user'; 

@Injectable() 
export class UserService { 

    constructor(private _db: DatabaseService) {} 

    getUserAsObservableList(uid: string): FirebaseListObservable<any> { 
    return this._db.getUserAsObservableList(uid); 
    } 
} 

次のようにDatabaseService getUserAsObservableListが設計されています

getUserAsObservableList(uid: string): FirebaseListObservable<any> { 
    let ref = '/' + this.base + '/users/' + uid; 
    return this.af.database.list(ref); 
    } 

Firebaseでアクセスしているデータ：

そして、私のコンポーネントで、私は次の操作を行います。

constructor(public navCtrl: NavController, private _auth: AuthService, private _db: DatabaseService, private _user: UserService) { 
     console.log('HomePage constructor called.'); 
     this.user = new User(this._auth.uid, this._user.getUserAsObservableList(this._auth.uid)); 
     console.log('User: ', this.user); 
     } 

最後に、私のHTMLに次のコードを表示します。それでは、私が試した

：

<h2>Welcome to Ionic!</h2> 

    <ul> 
    <li *ngFor="let item of user.observableList | async"> 
     {{ item | json }} 
    </li> 
    </ul> 

は、次のような出力を提供します公衆ノードにアクセスする：

<ul> 
    <li *ngFor="let item of user.observableList | async"> 
     {{ item.public | json }} 
    </li> 
    </ul> 

以下を入手してください。

私のコードで何が間違っていますか？よりグローバルに、ここで間違ったパターンを使用していますか？これを別の方法で実装する必要がありますか？

おかげ

Answer 1

問題は、あなたがリストとしてユーザーのプロパティを取得しているため、キーを使用してそれらにアクセスすることができないということ、です。あなたはあなたが望むものを達成するための2つの選択肢があります。オブジェクトまたはあなたがそうのように表示するデータの周り*ngIfをラップする必要があるとして、あなたはあなたのユーザーを取得することができ、次のいずれか

<span *ngIf="item.$key == 'public'"> 
    {{item | json}} 
</span>