CODEWITHSUNDEEP
htmlangularfirebaseionic-frameworkgoogle-cloud-firestore
Xavier Duvan Melo
Xavier Duvan Melo

Reputation: 360

Error when i try to show a specific Document from Firestore in a ion-card?

When I try to bring a specific document with a specific ID, I know how to bring it. The problem is when I try to show the document in the Html it does not let me.

Function to call service and get the document! 

 item:restaurantModel={
    id_doc: '',
    logo:'',
    descripcion:'',
    nombre:'',
    portada:'',
    idadmin:'',
  }
  
  ResDocument:AngularFirestoreDocument<restaurantModel>;
  ResObservable: Observable<restaurantModel>;
  
  this.idres=this.router.snapshot.params['id'];
           console.log(this.idres);
           this.ResDocument = this.resser.getSpecificRestaurant(this.idres);
           this.ResObservable=this.ResDocument.snapshotChanges().pipe(             
            map(actions => {
              const data = actions.payload.data() as any;
              const uid = actions.payload.id;
              return { uid, ...data};
            })            
          );

//really print the data from a specific document
          this.ResObservable.subscribe(datas => console.log(datas.descripcion));

Service:

getSpecificRestaurant(id){
  return this.fs.doc<restaurantModel>("/restaurantes/"+id);
}

HTML:

<ion-card *ngFor="let item of ResObservable | async ">
    
       
      
    <img src="{{item.portada}}">

   
 <ion-card-content>
   

    <ion-card-title>
        <h1>{{item.nombre}}</h1>
    </ion-card-title> 
  <p>{{item.descripcion}}</p>
  </ion-card-content>
</ion-card>

Thanks for Your help!

Upvotes: 1

Views: 23

Answers (1)

dev-dan
dev-dan

Reputation: 6283

The *ngFor you are using is over the observable rather than the data you obtain within the subscription. After seeing the data I do not think you need to use *ngFor as you only get back one object.

public items;

this.ResObservable.subscribe(datas => this.items = datas);

Then you can access the object directly in your template.

<div *ngIf="items">
    <ion-card>      
        <img src="{{ items.portada }}">
        <ion-card-content>
            <ion-card-title>
                <h1>{{ items.nombre }}</h1>
            </ion-card-title> 
            <p>{{ items.descripcion }}</p>
         </ion-card-content>
    </ion-card>
</div>

Upvotes: 1

Related Questions