Ошибка при попытке показать конкретный документ из Firestore на ионной карте?

Question

Когда я пытаюсь принести конкретный документ с определенным идентификатором, я знаю, как это сделать. Проблема в том, что когда я пытаюсь показать документ в HTML, он не позволяет мне.

Функция для вызова службы и получения документа!

 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));

Услуги:

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>

Спасибо за помощь!

Answer 1

*ngFor, который вы используете, превышает наблюдаемые, а не данные, которые вы получаете в рамках подписки.После просмотра данных я не думаю, что вам нужно использовать *ngFor, поскольку вы получаете только один объект.

public items;

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

Затем вы можете получить доступ к объекту непосредственно в вашем шаблоне.

<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>