Question

我有一个带有对象的localStorage数组。然后我将该数组add（）添加到firestore。结果，我有一个像这样的文档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管道。但无法看到具有插值的地图数据

UPD： 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获取地图数据

1 个答案: