时间戳

首页 > 解决方案 > 从 Firebase 读取数据并使用 Angular 在表格上显示

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

问题描述

我正在按照 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();
}

标签： angularfirebasefirebase-realtime-database

解决方案

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

<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>

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

<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>

推荐阅读