Angular 仅在获取API时在console.log（）中获取URL

我在console.log（arrayCalendar）中得到了这个消息，我希望它返回JSON数据！这个console.log显示的就是这个！这是来自api

{
  "_isScalar": false,
  "source": {
    "_isScalar": false,
    "source": {
      "_isScalar": false,
      "source": {
        "_isScalar": true,
        "value": {
          "url": "https://prpresponse.co.uk/Wforce90672/getcandidatecalendardatav2.php/",
          "body": null,
          "reportProgress": false,
          "withCredentials": false,
          "responseType": "json",
          "method": "GET",
          "headers": {
            "normalizedNames": {},
            "lazyUpdate": null,
            "headers": {}
          },
          "params": {
            "updates": null,
            "cloneFrom": null,
            "encoder": {},
            "map": null
          },
          "urlWithParams": "https://prpresponse.co.uk/Wforce90672/getcandidatecalendardatav2.php/"
        }
      },
      "operator": {
        "concurrent": 1
      }
    },
    "operator": {}
  },
  "operator": {}
}

我的服务内容如下：

import {Injectable} from '@angular/core';
//import { Observable } from 'tns-core-modules/ui/page/page';

//import { Observable } from 'rxjs';
import { HttpClient } from '@angular/common/http';

import { Color } from "tns-core-modules/color";
// >> angular-calendar-require
import { CalendarEvent } from 'nativescript-ui-calendar';

import { CalendarClass } from '../classes/calendarClass';

@Injectable()

export class calendarApiService{

    listOfCalendars: CalendarClass[];

    apiUrl = "https://prpresponse.co.uk/Wforce90672/getcandidatecalendardatav2.php/";

    constructor(private httpclient : HttpClient) {

    }

    getCalendarData(){
         return this.httpclient.get<CalendarClass[]>(this.apiUrl);
    }


    getCalendarEvents(): Array<CalendarEvent> {


         var arrayCalendar = this.getCalendarData();

         console.log(arrayCalendar);        


          const appointments = [
            {
                "date": " 2018-09-04",
                "colour": "#87CEFA",
                "title": "Available - 09-04-2018 00:00  to 09-04-2018 05:59"
            },
            {
                "date": " 2018-09-04",
                "colour": "#90EE90",
                "title": "Not Available - 09-04-2018 00:00  to 09-04-2018 23:59"
            }

        ]



        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 < appointments.length; i++) {
        event = new CalendarEvent(appointments[i].title, new Date(appointments[i].date), new Date(appointments[i].date), false, colors[i * 10 % (appointments[i].colour.length - 1)]);    

        events.push(event);     
    }

        return events;

    }
}

我怎样才能从我请求的api中获得像上面那样的数据！当我得到数据时，我可以通过写下来的for循环迭代数据

这是组件,

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=>{
      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;
}


}

---

如果我能回答您的问题，那么我想您应该在这一行获取数据

var arrayCalendar=this.getCalendarData（）

所以你需要订阅可观察的

var arrayCalendar:any = []
 this.getCalendarData().subscribe((data: any) => {
     arrayCalendar = data;
     console.log(arrayCalendar);   
   }
 );

---

与我们共享您的api代码和组件。ts code检查您访问的端点是否正确？立即检查！现在就给你@ConstantinGuidon您能详细说明一下吗？如果我总结一下您的代码的json响应不好，对吗？我已经将CalendarClass的列表类型设置为`ListofCalendarDars:CalendarClass[]；`我是否应该写入

var arrayCalendar:any=[]this.getCalendarData（）.subscribe（（data:any）=>{listOfCalendars=data；console.log（this.listOfCalendars）；}）

arrayCalendar

从未在方法体中使用，因此您可以使用

listOfCalendars

。

export class CalendarClass{
date: Date;
colour: string;
title: string;

}

var arrayCalendar:any = []
 this.getCalendarData().subscribe((data: any) => {
     arrayCalendar = data;
     console.log(arrayCalendar);   
   }
 );