Angular/RxJS 映射 observable 时出现类型错误

Question

尝试从我的 api

映射响应时出现以下错误

Argument of type 'OperatorFunction<{ results: CustomerShipment[]; },{ title: string; start: Date; }[]>' 
is not assignable to parameter of type 'OperatorFunction<CustomerShipment[], {title:string; start: Date;}[]>'. 
Type '{ results: CustomerShipment[]; }' is missing the following properties from type 'CustomerShipment[]':
length, pop, push, concat, and 26 more.

API 其中 returns 具有以下模式的 JSON 对象数组……我使用 Angular-Calendar v0.28.28

{
    "0": {
        "customerId": 1234,
        "customer": "test",
        "items": [
           id: 123,
           tssNumber: "1234567"
           containerNumber: "e.g.",
           appointmentTime: "23/03/2022 12:00 p.m."
        ]
    }
}

angular 日历事件具有以下必需属性：start: Date、title: string。我正在尝试将来自 API 的响应映射到 CalendarEvent 对象：

events$: Observable<CalendarEvent<{ results: CustomerShipment }>[]>;

ngAfterViewInit(): void 
{
   this.fetchCustomers(formatDate(this.viewDate, 'yyyy-MM-dd', 'en'));
}

fetchData(day: string): void {
let params = new HttpParams();
params = params.append('userid', this.getUserId());
params = params.append('date', day);
 this.events$ = this.calendarService.getDailyCalendarShipments(params)
   .pipe(
      map(({ results }: { results: CustomerShipment[] }) => {
        return results.map((result: CustomerShipment) => {
          return {
            title: result.customer,
            start: new Date()
          };
        });
   }));
}

然后在HTML组件

<div class="container-fluid">
  <div #scrollContainer class="scroll-container" *ngIf="events$ | async; else loader; let events">
    <app-day-view-scheduler (eventTimesChanged)="eventTimesChanged($event)"
                            (userChanged)="userChanged($event)"
                            [events]="events"
                            [headers]="headers"
                            [viewDate]="viewDate">
    </app-day-view-scheduler>
  </div>
</div>

我可以在不使用 Observable 的情况下做到这一点，但我想使用 angular async 管道。

我正在使用以下示例：https://mattlewis92.github.io/angular-calendar/#/async-events

Answer 1

您需要将 events$ Observable 的类型更改为 Observable<CalendarEvent<CustomerShipment>[]>，或者将 map 运算符输出更改为 CalendarEvent<{ results: CustomerShipment }>[]，如下所示：

this.events$ = this.calendarService.getDailyCalendarShipments(params).pipe(
  map(({ results }: { results: CustomerShipment[] }) => ({
    results: results.map((result: CustomerShipment) => ({
      title: result.customer,
      start: new Date(),
    })),
  }))
);

Answer 2

getDailyCalendarShipments 返回 CustomerShipment 类型的数组

使用 from 按顺序发出数据并 mergeMap 订阅此

在 map 中创建类型为 { results: CustomerShipment }

的活动

toArray 创建 { results: CustomerShipment }[]

this.events$ = this.calendarService.getDailyCalendarShipments(params).pipe(
  mergeMap(({ results }: { results: CustomerShipment[] }) => {
    return from(results);
  }),
  map((result: CustomerShipment) => {
    return {
      title: result.customer,
      start: new Date(),
    };
  }),
  toArray()
);

Angular/RxJS 映射 observable 时出现类型错误

Angular/RxJS type error when mapping observable

rxjs

typescript

angular

angular-calendar