Как получить подробную информацию о продукте из базы данных firebase в реальном времени в angular 9 и распечатать его в html?

Question

product.component.ts

import { AngularFireDatabase } from '@angular/fire/database';
import { ProductService } from './../product.service';
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit} from '@angular/core';


@Component({
  selector: 'app-product',
  providers:[],
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {

  product;
  object9;
  constructor(public route: ActivatedRoute,public db: AngularFireDatabase) { 

      this.id= this.route.snapshot.paramMap.get('id');

    console.log(this.id);

    this.object9=this.db.object('products/'+this.id).valueChanges().subscribe(val =>{ 
          console.log(val);
        });

   }

 ngOnInit() {

  }

}

product.component.html

{{ object9.fullName|async|json}}

База данных Firebase в реальном времени:

oshop-1df92

   products

     -M9vLP-mF2DAIMkkKVR_
        email:
        fullName:

     -M9vLfD2r3PrQbXQiYot
     -M9vSjV9lNVZ2QhIj63n

В консоли я получаю вывод идентификатора, а console.log (val) выводит объект, имеющий id, но в html он печатает null. Почему ?? Я использую последнюю angular 9 с последней версией firebase и angularfire.Oshop - это название проекта. Пожалуйста, помогите мне.

Answer 1

Присваивая подписку переменной object9 , а не данным, которые вы получаете из подписки. Вместо этого замените свой код присвоения значения следующими строками:

   this.db.object('products/'+this.id).valueChanges().subscribe(val =>{ 
      console.log(val);
     this.object9= val
   });
   }

А теперь просто распечатайте значение в html, используя:

{{object9.fullname}}