从 Firestore 获取地图数据

Question

我有一个包含对象的 localStorage 数组。然后我将这个数组添加到 firestore.in 结果我有一个这样的文档 firestore document 我这里有 2 张地图。那么我怎样才能让它显示出来。当我使用这段代码时，我只能显示时间戳

this.sells = this.sellsCollection.snapshotChanges().pipe(
      map(
        changes => {
          return changes.map(a => {
            const data = a.payload.doc.data() as Sell
            const id = a.payload.doc.id;
            return data
          })
        }
      )
    )

我使用时可以查看所有数据 | json 管道。但看不到带插值的地图数据

更新： console log of data

Answer 1

在您的 map 可观察运算符中试试这个：

changes => {
  return changes.map(a => {
      const temp = a.payload.doc.data() as Sell

      // Each temp has the following shape (it looks like an array
      //   but it isn't really one. It's a more general object that
      //   is not an iterable out-of-the-box):
      // {
      //   1:    {...},
      //   2:    {...},
      //   3:    {...},
      //   ...
      //   date: '...'
      // }
      // We want to convert this object, to another object
      //   with the following shape: {items: any[], date: string}
      // To do that, what we can do is iterate over all of the keys
      //   of the incoming object (shown above) except for the 'date' 
      //   key and put all of their values in the items array. 
      // We can do that by getting all of the keys as an array
      //   (Object.keys) and iterate through them, filtering out the
      //   'date' key. For the other keys, that actually pass by the
      //   filter, we use the map function to turn them into their actual
      //   values.
      const items = Object.keys(temp)
          .filter(key => key !== 'date')
          .map(key => temp[key]);

      // Now we just have to build up the object to be returned, including
      //   the date, that was filtered out in the code above.
      return {items, date: temp.date};
    }) // end of Array.map
}

然后，在您的模板中，您可以执行以下操作：

<div *ngFor="let sell of sells">
  <div *ngFor"let item of sell?.items">
    {{item?.stock}}
  </div>
</div>

从 Firestore 获取地图数据

get Map data from Firestore

typescript

angularfire

angular

google-cloud-firestore