[英]how do I get a single value from firebase using angularfire2 and angular5?
I am trying to obtain and display a single value from firebase. 我正在尝试从Firebase获取并显示单个值。
My firebase structure looks like this: 我的firebase结构如下所示:
My current .ts file looks like: 我当前的.ts文件如下所示:
storestat$: Observable<any[]>;
constructor(afDb: AngularFireDatabase) {
this.storestat$ = afDb.list<any>('MyShop').snapshotChanges();
}
I want to display the storeStatus value within the html using {{}} binding. 我想使用{{}}绑定在html中显示storeStatus值。 Something like the following:
类似于以下内容:
<button>{{ storeStatus }} Status</button>
I tried using the following initially: 我最初尝试使用以下内容:
<ng-container *ngFor="let s of storestat$ | async">...
<button>{{ s.storeStatus }}</button>
but of course that wouldn't work. 但是那当然是行不通的。
I tried searching for answers but they just didn't seem quite relevant as they were all pointing to obtaining multiple specific values from lists. 我尝试搜索答案,但它们似乎并不相关,因为它们都指向从列表中获取多个特定值。
I am using angularfire2 and angular5. 我正在使用angularfire2和angular5。
I am new to angular5 so any help would be appreciated, including any educational pointers. 我是angular5的新手,因此可以提供任何帮助,包括任何教育性的指导。
I have a workaround but not sure if it is the best solution. 我有一个解决方法,但不确定是否是最佳解决方案。 my new .ts file relevant portion looks like:
我新的.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()
})
);
});
and my .html relevant portion now looks like: 我的.html相关部分现在看起来像:
<ng-container *ngFor="let s of storestat$ | async">
<button *ngIf="s.key == 'storeStatus'">{{ s.val }} Status</button>
</ng-container>
I don't think this is the cleanest solution as the database call maps the unwanted Current Orders branch as well, but it works. 我认为这不是最干净的解决方案,因为数据库调用也映射了不需要的Current Orders分支,但是它可以工作。
If you are not care about the push keys you can use .valueChanges()
and it should work like this 如果您不关心按键,可以使用
.valueChanges()
,它应该像这样工作
afDb.list<any>('myshop').valueChanges().subscribe(value =>
{
this.storestat$ = value;
});
and in html 和HTML
<ng-container *ngFor="let s of storestat$">
<button>{{ s.storeStatus }} Status</button>
</ng-container>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.