Чтение данных из Firebase и отображение на столе с помощью Angular

Question

Я следую руководству Моша по созданию интернет-магазина. В моей базе данных Firebase Realtime есть данные о продуктах, которые я ранее внедрил. Теперь я хочу отобразить информацию об этих продуктах в виде таблицы. Проблема в том, что название и цена не отображаются, однако кнопка редактирования содержит ссылку на ключ продукта. Было бы здорово, если бы кто-то мог помочь мне с этим вопросом. 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>