在自定义 class 中存储 FirebaseListObservable

Question

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

我在某一点上很挣扎。

我想保留我当前的用户。所以我创建了一个用户 class:

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

}

允许我完成与用户相关的所有操作的 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>

给出以下输出：

然后我尝试访问 public 节点：

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

并得到以下信息：

我的代码哪里做错了？在全球范围内，我在这里使用了错误的模式吗？我应该以不同的方式实施吗？

谢谢

Answer 1

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

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

在自定义 class 中存储 FirebaseListObservable

Store FirebaseListObservable in custom class

firebase

firebase-realtime-database

ionic2

angularfire2

angular