数据未从Firebase实时数据库获取并显示到angular 6

Question

我是angel和firebase的新手。我正在遵循Mosh使用angular构建oshop的教程。 我被困在admin-products页面上，在那里我无法获取产品列表并在admin-products页面上显示。我正在使用Angular6。

admin-products.component.ts

export class AdminProductsComponent implements OnInit {
   products$;

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

  ngOnInit(): void {
  }

}

product.service.ts

    export class ProductService {

      constructor(private db:AngularFireDatabase) { }

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

    getAll() {
        return this.db.list('/products').snapshotChanges()
        .pipe(
            map(productDb => 
                { productDb.map ( prod => {
                  return { 
                          key: prod.key, 
                          data: prod.payload.val()
                          }
                })}
              )
             )

    }
    /* *I also tried below options but nothing works for me.*
    getAll(){
      return this.db.list('/products').snapshotChanges();
    }

    getAll(){
      return this.db
      .list('/products') /*reference => reference.orderByChild('name')) 
          .snapshotChanges() // include snapshot itself (access to key property)
          .pipe(map(metadata => metadata.map(data => ({ key: data.payload.key, data: data.payload.val() }))));
    } 

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


    }*/

    }

admin-products.component.html

<tbody>
     <tr *ngFor="let p of products$  ">

         <td> {{ p.key }} </td>
         <td> {{ p.data }} </td> 

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

我在管理产品页面上看到的是一个只有标题的空表。

请提出建议。