将 FirebaseListObservable 存储在自定义类中

Question

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

我在一个特定的点上苦苦挣扎。

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

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>

给出以下输出：

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

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