使用 ionic 3 中的 Angularfire2 从 Firestore 获取集合文档的 ID [英] get the ID of collection document from Firestore using Angularfire2 in ionic 3

问题描述

我正在尝试获取集合的 id 以在离子页面中使用它:

I'm trying to get id of the collection to use it in the ionic page:

这是我的界面:

  export interface Item { 
  categoryOfPost: string; 
  imageUrl: string;
  nameOfPost: string;
  cityOfPost: string;
  createdDate: string;
  currencyOfPost: string;
  priceOfPost: number;
  typeOfPost: number;
  statusOfPost: string;
  id?: string;
}

 private itemsCollection: AngularFirestoreCollection<Item>;
  items: Observable<Item[]>;

这是getPosts函数的内容

and this is the content of the getPosts function

  this.itemsCollection = this.afs.collection('posts', ref => ref.orderBy('createdDate', 'desc'));
  this.items = this.itemsCollection.valueChanges(); 

当我想查看我使用的内容时:

when i want to view the content i use:

 <ion-card style="margin-bottom: 25px; background-color: burlywood" *ngFor="let item of items | async">
    <ion-item text-wrap  style="margin-bottom: 25px; background-color: burlywood"> 
        <ion-list >       
          <ion-item> 
            <img src="{{ item.imageUrl }}">            
            cityOfPost: {{ item.id }}            
          <button ion-button (click)="detailpage(item.id)">click to test  </button>
          </ion-item>           
        </ion-list>  
    </ion-item>
  </ion-card>  

我可以在 HTML 上显示除未定义 ID 之外的所有内容????什么是正确的显示方式???

I can show everything on the HTML EXCEPT for the ID it comes UNDEFINED ???? what is the correct way to display it ???

谢谢.

推荐答案

这是因为通过使用 valueChanges() 所有 Snapshot 元数据都被剥离，只有方法只提供数据"，如解释在 doc 中.

This is because by using valueChanges() "all Snapshot metadata is stripped and just the method provides only the data", as explained in the doc.

您应该使用 snapshotChanges()，请参阅文档 此处 表示:为什么要使用它?- 当您需要数据列表但又想保留元数据时."

You should use snapshotChanges(), see the doc here which says: "Why would you use it? - When you need a list of data but also want to keep around metadata."

这篇关于使用 ionic 3 中的 Angularfire2 从 Firestore 获取集合文档的 ID的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！