从 Firebase 读取数据并使用 Angular 在表格上显示答案

【问题标题】：Reading Data from Firebase and displaying on a table using Angular从 Firebase 读取数据并使用 Angular 在表格上显示
【发布时间】：2019-10-23 09:57:07
【问题描述】：

我正在按照 Mosh 的教程创建一个在线商店。我的 Firebase 实时数据库包含有关我之前实施的产品的数据。现在，我想在表格中显示有关这些产品的信息。问题是没有显示标题和价格，但是编辑按钮包含引用产品密钥的链接。如果有人可以帮助我解决这个问题，那就太好了。 TIA

#admin-products.component.html

<p>
<a routerLink = "/admin/products/new" class="btn btn-primary"> Update Products</a>
</p>
<table class="table">
    <thead>
        <tr>
            <th>Title</th>
            <th>Price</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let p of products$ | async">
            <td>{{ p.title }}</td>
            <td>{{ p.price }}</td>
            <td>
                <a [routerLink]="['/admin/products/',p.key]"> Edit</a>
            </td>
        </tr>
    </tbody>
</table>

#admin-products.component.ts

products$:any;

  constructor(private productService: ProductService) {
    this.products$= this.productService.getAll();
   }

#product.service.ts

getAll() {
  return this.db.list('/productlist').snapshotChanges();
}

【问题讨论】：

这对你有什么好处console.log(this.products$);
@PeterHaddad Stratubas 给出的答案对我有用

标签： angular firebase firebase-realtime-database

【解决方案1】：

我认为（未经测试）您的问题在这里：

<tr *ngFor="let p of products$ | async">
    <td>{{ p.title }}</td>
    <td>{{ p.price }}</td>
    <td>
        <a [routerLink]="['/admin/products/',p.key]"> Edit</a>
    </td>
</tr>

应该有一个带有val() 方法的payload 中间属性，如下所示：

<tr *ngFor="let p of products$ | async">
    <td>{{ p.payload.val().title }}</td>
    <td>{{ p.payload.val().price }}</td>
    <td>
        <a [routerLink]="['/admin/products/',p.key]"> Edit</a>
    </td>
</tr>

【讨论】：