在 Angular 2 中使用 Firebase 从多个列表中检索值

Question

我有一个简单的应用程序列出了一组位置，登录用户可以在其中将给定位置标记为 "favorite"。

我在 firebase 中的数据结构包含一个简单的位置列表：

位置 => 位置 id: [] => [{name: "MyName"}, {name: "MyName 2}]

喜欢 => 用户 ID：[] => 位置 ID：[] => {喜欢：真}

我想使用一些简单的逻辑在我的模板中对此进行迭代：

  <md-card *ngFor="let location of locations | async">
    <md-card-title> {{location.name}}</md-card-title>
    <md-card-content>{{location.liked}}</md-card-content>
  </mc-card>

在我的组件中使用以下逻辑

  locations: Observable<any[]>;

  constructor(
    private cardService: CardService,
    private router: Router,
    public af: AngularFire)
  {
    this.locations = af.database.list('/trips')
      .map((locations) => {
        return locations.map((location) => {
          location.liked =  af.database.object(`/likes/${this.uid}/${location.$key}`);
          return location;
        })
      });

但是，location.liked 属性在我看来仍然是空的。我检查了 /likes/${this.uid}/${location.$key} URL 实际上包含所需的数据。

关于我应该如何处理这个问题有什么想法吗？

谢谢

Answer 1

因为 location.like 是 firebase database.object returns FirebaseObjectObservable 对象。要在视图中显示对象值，您应该在其上使用 async 管道

<md-card-content>{{location.liked | async}}</md-card-content>

您可以在 AngularFire Docs

中找到相同的解释

在 Angular 2 中使用 Firebase 从多个列表中检索值

Retrieving values from multiple lists with Firebase in Angular 2

javascript

angularjs

firebase

firebase-realtime-database

angularfire2