如何从angular 9中的firebase实时数据库中检索单品详情并打印到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 realtime Database:

oshop-1df92

   products

     -M9vLP-mF2DAIMkkKVR_
        email:
        fullName:

     -M9vLfD2r3PrQbXQiYot
     -M9vSjV9lNVZ2QhIj63n

In console I am getting id printed and console.log(val) prints object having the id,but in html it is printing null.Why?? I am using latest angular 9 with latest version of firebase and angularfire.Oshop is name of project. Please help me out.

Answer 1

By assigning the subscription to the variable object9 and not the data that you get from the subscription. Instead replace your code of assinging the value by the following lines:

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

And now simply print the value in html using:

{{object9.fullname}}