无法从Firestore获取数据填充Angular Calendar事件的解决方案咨询

我正在使用Angular Calendar展示事件，数据存储在Firestore中。

以下是我的代码：

events$!: Observable<CalendarEvent<{ drop: Drop }>[]>;

let drops$ = from(this.drops);
this.events$! = drops$.pipe(({ result }: { results: Drop[] }) => {
  return result.map((drop: Drop) => {
    return {
      title: drop.campaignName,
      start: new Date(drop.dropDate),
    };
  });
});

运行时出现如下错误：

Argument of type '({ result }: { results: Drop[];}) => any' is not assignable to parameter of type 'OperatorFunction<Drop, CalendarEvent<{ drop: Drop; }>[]>'.
Types of parameters '__0' and 'source' are incompatible.
Property 'results' is missing in type 'Observable' but required in type '{ results: Drop[]; }'.ts(2345)

问题分析与解决方法 #

错误根源有两个：

• 错误地将普通函数直接传入pipe，而非使用RxJS标准操作符；
• 对from(this.drops)的发射值类型理解错误，同时未匹配CalendarEvent的泛型定义。

根据this.drops的实际类型，分两种情况修正：

情况1：this.drops是Drop[]数组

from(this.drops)会将数组拆分为单个Drop对象逐个发射，需要先用toArray()将其重新收集为数组，再做转换：

import { from, Observable } from 'rxjs';
import { map, toArray } from 'rxjs/operators';
import { CalendarEvent } from 'angular-calendar';

events$!: Observable<CalendarEvent<{ drop: Drop }>[]>;

this.events$ = from(this.drops).pipe(
  toArray(),
  map((drops: Drop[]) => {
    return drops.map(drop => ({
      title: drop.campaignName,
      start: new Date(drop.dropDate),
      meta: { drop } // 补充meta属性，匹配CalendarEvent的泛型类型
    }));
  })
);

情况2：this.drops是Observable<Drop[]>（比如从Firestore查询返回的可观察对象）

直接对数组可观察对象做map转换即可，无需使用from：

import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { CalendarEvent } from 'angular-calendar';

events$!: Observable<CalendarEvent<{ drop: Drop }>[]>;

this.events$ = this.drops.pipe(
  map((drops: Drop[]) => {
    return drops.map(drop => ({
      title: drop.campaignName,
      start: new Date(drop.dropDate),
      meta: { drop } // 补充meta属性，匹配泛型定义
    }));
  })
);

关键修正点 #

1. 使用RxJS标准操作符（map、toArray）传入pipe，而非直接传自定义函数；
2. 确保每个转换后的CalendarEvent包含meta字段，匹配你定义的CalendarEvent<{ drop: Drop }>类型；
3. 根据this.drops的实际类型选择是否使用from和toArray。

内容的提问来源于stack exchange，提问作者Wahéb