类型'Observable <>'缺少Angular Nativescript中的属性

Question

当我将我的功能设置为getCalendarEvents(): Observable<Array<CalendarEvent>>{时，我正面临这个问题。错误消息显示为Type 'Observable<CalendarEvent[]>' is missing the following properties from type 'CalendarEvent[]': length, pop, push, concat, and 24 more.

这是service.ts

getCalendarEvents(): Observable<Array<CalendarEvent>>{
         var listCal:any = []
         return this.getCalendarData().pipe(map((data: any) => {
          listCal = data;
        console.log('list cal', listCal)
             let startDate: Date,
             endDate: Date,
             event: CalendarEvent;
             let colors: Array<Color> = [new Color(200, 188, 26, 214), new Color(220, 255, 109, 130), new Color(255, 55, 45, 255), new Color(199, 17, 227, 10), new Color(255, 255, 54, 3)];
             let events: Array<CalendarEvent> = new Array<CalendarEvent>();
             for (let i = 1; i < listCal.length; i++) {
                  event = new CalendarEvent(listCal[i].title, new Date(listCal[i].date), new Date(listCal[i].date), false, colors[i * 10 % (listCal[i].colour.length - 1)]);    

                  events.push(event);     
              }
             return events;
            }));          
    }

在service.ts中，错误没有显示，但由于声明我在日历组件中遇到上述错误，这是：

import { Component, OnInit } from '@angular/core';

import { calendarApiService } from './service/api.service';
import { CalendarClass } from './classes/calendarClass';
import { RadCalendar, CalendarEvent, CalendarSelectionEventData } from "nativescript-ui-calendar";

@Component({
  selector: 'ns-calendar',
  templateUrl: './calendar.component.html',
  styleUrls: ['./calendar.component.css'],
  moduleId: module.id,
  providers: [calendarApiService]
})
export class CalendarComponent implements OnInit {

  constructor(private _calendarApiService: calendarApiService) {
    //console.log("hi");

   }
   private _events: Array<CalendarEvent>;
   private _listItems: Array<CalendarEvent>;

   listOfCalendar: CalendarClass[];




get eventSource() {
    return this._events;
}

get myItems(): Array<CalendarEvent> {
    return this._listItems;
}

set myItems(value) {
    this._listItems = value;
}

// ngOnInit() {
//     this._events = this._calendarService.getCalendarEvents();
// }


ngOnInit() {

  this._events = this._calendarApiService.getCalendarEvents();


  this._calendarApiService.getCalendarData() 
  .subscribe( 
  (data:any)=>{ 
  this.listOfCalendar = data; 
  } 
  );

  //console.log(this.listOfCalendar);

}

onDateSelected(args: CalendarSelectionEventData) {
    const calendar: RadCalendar = args.object;
    const date: Date = args.date;
    const events: Array<CalendarEvent> = calendar.getEventsForDate(date);


    this.myItems = events;
}


}

Answer 1

您应该从您的方法返回Array<CalendarEvent>或不指定任何类型。当你试图将数组分配给Observable<Array<CalendarEvent>时。

getCalendarEvents(){
         var listCal:any = []
         this.getCalendarData().pipe(map((data: any) => {
          listCal = data;
        console.log('list cal', listCal)
             let startDate: Date,
             endDate: Date,
             event: CalendarEvent;
             let colors: Array<Color> = [new Color(200, 188, 26, 214), new Color(220, 255, 109, 130), new Color(255, 55, 45, 255), new Color(199, 17, 227, 10), new Color(255, 255, 54, 3)];
             let events: Array<CalendarEvent> = new Array<CalendarEvent>();
             for (let i = 1; i < listCal.length; i++) {
                  event = new CalendarEvent(listCal[i].title, new Date(listCal[i].date), new Date(listCal[i].date), false, colors[i * 10 % (listCal[i].colour.length - 1)]);    

                  events.push(event);     
              }
             return events;
            }));          
    }

Answer 2

使用from运算符将数组转换为observable

return from(events);