无法从 firebase-Angular http://localhost:4200/admin/products/undefined 获取 $key答案

【问题标题】：Cant get $key from firebase- Angular http://localhost:4200/admin/products/undefined无法从 firebase-Angular http://localhost:4200/admin/products/undefined 获取 $key
【发布时间】：2021-05-19 17:09:43
【问题描述】：

我在学习课程的同时从事 Angular 项目。我正在尝试从我的 firebase 中获取 $key，并在路由中使用它来重定向到编辑页面，但我不断收到“未定义”。我从这里尝试了多种解决方案，但没有任何效果。

我的产品服务。

create (product) {
return this.db.list('/products').push(product);

}

 getAll() {
return this.db.list('/products').valueChanges();

}

 get(productId) : Observable<any> { return this.db.object('/products/' + productId).snapshotChanges();

}

我想在哪里使用 $key。

 <a [routerLink]="['/admin/products/',p.$key]"> Edit </a>

我在浏览器中得到的信息： http://localhost:4200/admin/products/undefined

【问题讨论】：

“p”在哪里设置..？
{{p.title}} {{p.price}} 编辑
p.title 渲染了吗？
是的，我知道价格和标题。问题仅在于 $key，它是未定义的。我发现一些关于它的新版本的变化，所以这种方式不起作用。而且我现在不知道如何从数据库中获取 $key 以显示有关我存储的产品的信息
那么当你做 {{ p | json}}？它会显示 $key 吗？

标签： angular firebase key

【解决方案1】：

your best bet would be to try as an example like so - set your variable from firebase or firestore as products in your yourcomponent.component.html file:
<div *ngFor="let item of products | keyvalue">
 <a [routerLink]="['/admin/products/',item.key]"> Edit </a>
</div>

keyvalue 管道是 Angular 专门用来分割值和键的，并且与 ngfor 配合得很好。

【讨论】：