将FirebaseListObservable存储在自定义类中

Question

我正在使用Ionic 2和Firebase构建一个基本的移动应用程序。我正在使用AngularFire2从我的应用程序访问firebase。

我正在努力解决一个问题。

我想要保留当前用户。所以我创建了一个User类：

item = line.strip().split(',')

允许我完成与用户相关的所有操作的UserService：

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

}

DatabaseService getUserAsObservableList的设计如下：

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

我在Firebase中访问的数据：

在我的组件中，我执行以下操作：

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

最后，在我的html视图中输入以下代码：

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

提供以下输出：

然后我尝试访问公共节点：

<h2>Welcome to Ionic!</h2>

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

获得以下内容：

我的代码中出错了什么？更全球化，我在这里使用错误的模式吗？我应该以不同的方式实现这个吗？

由于

Answer 1

问题是，由于您要将用户的属性作为列表进行检索，因此无法使用该密钥访问它们。您有两种选择来实现您的目标。您可以将用户检索为对象，也可以将*ngIf包裹在要显示的数据周围，如下所示：

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