Question

我在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": {}
}

我的service.ts如下：

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中的数据看起来像这样！实际的api在邮递员get中返回这样的数据！

[{
  "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"
}, {
  "date": " 2018-09-05",
  "colour": "#87CEFA",
  "title": "Available - 09-05-2018 00:00  to 09-05-2018 05:59"
}, {
  "date": " 2018-09-06",
  "colour": "#90EE90",
  "title": "Not Available - 09-06-2018 00:00  to 09-06-2018 23:59"
}
]

我该如何从我请求的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;
}


}

这是日历类：

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

}

Answer 1

如果我能回答您的问题，那么我想您想在此处var arrayCalendar = this.getCalendarData()

处获取数据。

所以您需要订阅Observable。

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

当我获取API

1 个答案: