当我尝试在离子卡中显示 Firestore 中的特定文档时出错？

Question

当我尝试携带具有特定 ID 的特定文件时，我知道如何携带它。问题是当我尝试在 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>