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

【问题标题】：How to convert elements of an Observable array into a tuples如何将 Observable 数组的元素转换为元组
【发布时间】：2021-07-26 01:28:54
【问题描述】：

我从 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[]> 作为我的数据源？

【问题讨论】：

标签： angular typescript google-cloud-firestore rxjs observable

【解决方案1】：

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

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

  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]
           })
        
          }
        ]
       }
      }
    })
  }

【讨论】：