如何使用 angularfire2 和 angular5 从 firebase 获取单个值？

Question

我正在尝试从 firebase 获取并显示单个值。

我的 firebase 结构如下所示：

我当前的 .ts 文件如下所示：

storestat$: Observable<any[]>;

constructor(afDb: AngularFireDatabase) {
     this.storestat$ = afDb.list<any>('MyShop').snapshotChanges();
}

我想使用 {{}} 绑定在 html 中显示 storeStatus 值。类似于以下内容：

<button>{{ storeStatus }} Status</button>

我最初尝试使用以下内容：

<ng-container *ngFor="let s of storestat$ | async">...
<button>{{ s.storeStatus }}</button>

但这当然行不通。

我尝试搜索答案，但它们似乎不太相关，因为它们都指向从列表中获取多个特定值。

我正在使用 angularfire2 和 angular5。

我是 angular5 的新手，因此我们将不胜感激，包括任何教育指针。

Answer 1

我有一个解决方法，但不确定它是否是最佳解决方案。我的新 .ts 文件相关部分如下所示：

    this.storestat$ = afDb.list<any>('myshop').snapshotChanges()
       .map(
            changes => {
               return changes.map(
                  c => ({ val: c.payload.val(), 
                          key: c.payload.key,
                          ...c.payload.val()
                   })
               );
       });

我的 .html 相关部分现在看起来像：

<ng-container *ngFor="let s of storestat$ | async">

  <button *ngIf="s.key == 'storeStatus'">{{ s.val }} Status</button>

</ng-container>

我认为这不是最干净的解决方案，因为数据库调用也映射了不需要的 Current Orders 分支，但它确实有效。

Answer 2

如果你不关心按键，你可以使用.valueChanges()，它应该像这样工作

afDb.list<any>('myshop').valueChanges().subscribe(value => 
{
    this.storestat$ = value;
});

在html中

<ng-container *ngFor="let s of storestat$">

  <button>{{ s.storeStatus }} Status</button>

</ng-container>