Question

我正在按照Mosh的教程创建在线商店。我的Firebase Realtime DB包含有关我先前实现的产品的数据。现在，我想在表中显示有关那些产品的信息。问题是标题和价格没有显示，但是编辑按钮包含指向产品密钥的链接。如果有人可以帮助我解决这个问题，那就太好了。 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();
}

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

应该有一个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>

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

1 个答案: