Question

我正在尝试获取集合的ID以在离子页面上使用它：

这是我的界面：

  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函数的内容

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

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

 <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 EXCEPT上显示未定义ID的所有内容？显示它的正确方法是什么？

谢谢。

Answer 1

这是因为如doc所述，通过使用valueChanges()“剥离了所有快照元数据，仅该方法仅提供了数据”。

您应该使用snapshotChanges()，请参阅文档here，其中说：“为什么要使用它？-当您需要数据列表但又希望保留元数据时。”

Answer 2

我将代码更改为：

  this.itemsCollection = this.afs.collection('posts', ref => ref.orderBy('createdDate', 'desc'));
  this.items = this.itemsCollection.snapshotChanges().pipe(
    map(actions => actions.map(a => {
      const data = a.payload.doc.data() as Item;
      const id = a.payload.doc.id;
      return { id, ...data };
    }))
  );

，效果很好。

在ionic 3中使用Angularfire2从Firestore获取收集文档的ID

2 个答案: