如何使用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>