如何将 Observable 数组的元素转换为元组

Question

我从 firestore 检索了我想用于 echarts 图表的数据。最后得到 seagulls: Observable<SeagullId[]>;

export interface Seagull { date: string; amount: number; name: string; }
export interface SeagullId extends Seagull { id: string; }

export class ZonesComponent implements OnInit {

  private seagullCollection: AngularFirestoreCollection<Seagull>;
  seagulls: Observable<SeagullId[]>;

  constructor(private readonly afs: AngularFirestore) {
    this.seagullCollection = afs.collection<Seagull>('mowe');
    // .snapshotChanges() returns a DocumentChangeAction[], which contains
    // a lot of information about "what happened" with each change. If you want to
    // get the data and the id use the map operator.
    this.seagulls = this.seagullCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as Seagull;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
  }

现在我需要将 seagulls: Observable<SeagullId[]> 的每个元素转换为 [date, value, name]。硬编码示例：

series: [
      {
          type: 'themeRiver',
          emphasis: {
              itemStyle: {
                  shadowBlur: 20,
                  shadowColor: 'rgba(0, 0, 0, 0.8)'
              }
          },
          data: [['2015/11/08',10,'Lachmöwe'],['2015/11/09',15,'Lachmöwe'],['2015/11/10',35,'Lachmöwe'],
          ['2015/11/11',38,'Lachmöwe'],['2015/11/12',22,'Lachmöwe'],['2015/11/13',16,'Lachmöwe']..

我的方法如下：

series: [
      {
        type: 'themeRiver',
        emphasis: {
          itemStyle: {
            shadowBlur: 20,
            shadowColor: 'rgba(0, 0, 0, 0.8)'
          }
        },
        data: this.seagulls
        .pipe(map(data => {
          data.map(elem => {
            return [elem.date, elem.amount, elem.name]
          })
        }))
      }
    ]

但是数据类型映射不正确...我如何使用 seagulls: Observable<SeagullId[]> 作为我的数据源？

Answer 1

您已定义seagulls: Observable<SeagullId[]>。 Observables 是惰性的，所以如果你不订阅它们，你将不会收到任何返回值。

这带来了另一个问题，Observables 是异步的。也就是说，他们将 return 在未来的时间值。所以你需要订阅，获取一个值，然后才进行映射

  private seagullCollection: AngularFirestoreCollection<Seagull>;
  seagulls: Observable<SeagullId[]>;
  seagullsMapped: any;

  constructor(private readonly afs: AngularFirestore) {
    this.seagullCollection = afs.collection<Seagull>('mowe');
    // .snapshotChanges() returns a DocumentChangeAction[], which contains
    // a lot of information about "what happened" with each change. If you want to
    // get the data and the id use the map operator.
    this.seagulls = this.seagullCollection.snapshotChanges().pipe(
      map(actions => actions.map(a => {
        const data = a.payload.doc.data() as Seagull;
        const id = a.payload.doc.id;
        return { id, ...data };
      }))
    );
    this.seagulls.subscribe({
      next: (seagulls) => {
        this.seagullsMapped = {
        series: [
          {
            type: 'themeRiver',
            emphasis: {
              itemStyle: {
                shadowBlur: 20,
                shadowColor: 'rgba(0, 0, 0, 0.8)'
              }
           },
           data: seagulls.map(elem => {
              return [elem.date, elem.amount, elem.name]
           })
        
          }
        ]
       }
      }
    })
  }

如何将 Observable 数组的元素转换为元组

How to convert elements of an Observable array into a tuples

observable

rxjs

typescript

angular

google-cloud-firestore