Данные не извлекаются и не отображаются из базы данных firebase в реальном времени в angular 6 - PullRequest
0 голосов
/ 18 июня 2020

Я новичок в angular и firebase. Я следую руководству Mo sh по созданию oshop с использованием angular. Я застрял на странице продуктов администратора, где я не могу получить список продуктов и отобразить его на странице продуктов администратора. Я использую 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>

На странице admin-product я вижу пустую таблицу с заголовком.

Пожалуйста, предложите.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...