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

我不认为这是最干净的解决方案，因为数据库调用也会映射不需要的当前订单分支，但它可以工作。

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>