从 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 observable 运算符中试试这个：

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>