Передача данных календаря Google из сервиса в компонент - PullRequest
Новая
       41

Передача данных календаря Google из сервиса в компонент

0 голосов
/ 08 декабря 2018

Массив не передается от сервиса к компоненту:

В функции test() на странице service.ts данные календаря Google успешно считываются и помещаются в массив с именем response.Все данные журналы.

Когда lesson-summary.component.ts вызывает функцию test(), данные массива response не отображаются в lesson-summary.component.html

Спасибо за любую помощь!

google-calendar.service.ts 

import { Injectable, Directive } from "@angular/core";
import * as moment from "moment-timezone";

declare var gapi: any;

@Injectable({
  providedIn: "root"
})
export class GoogleCalendarService {
  private response = [];

  constructor() { }

  test() {

    gapi.load("client", () => {
      gapi.client.init({
        apiKey: "API string here",
        discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"]
      }).then(() => {
        var month = moment().month();
        const firstOfMonth = moment().startOf("month").format("YYYY-MM-DD hh:mm");
        const lastOfMonth = moment().endOf("month").format("YYYY-MM-DD hh:mm");
        var firstOfMonthUTC = moment.tz(firstOfMonth, "America/Toronto").format();
        var lastOfMonthUTC = moment.tz(lastOfMonth, "America/Toronto").format();

        return gapi.client.calendar.events.list({
          calendarId: "calendar id here",
          timeMax: lastOfMonthUTC,
          timeMin: firstOfMonthUTC,
          singleEvents: true
        });
      })//end of .then

        .then((data) => {
          this.response.push.apply(this.response, data.result.items);
          console.log(data.result.items, "data.result.items");
          return this.response;
        });//end of .then

    });//end of .load
  }//end of test
}//end of export

lesson-summary.component.ts 

import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs";
import { GoogleCalendarService } from "../google-calendar.service";

declare var gapi: any;

@Component({
  selector: "app-lesson-summary",
  templateUrl: "./lesson-summary.component.html",
  styleUrls: ["./lesson-summary.component.css"]
})

export class LessonSummaryComponent implements OnInit {
  private response;

  constructor(
    private calendarService: GoogleCalendarService) {
    this.response = this.calendarService.test();
  }

  ngOnInit() {
  }

}

сводка урока.component.html 

<ul>
 <li *ngFor = "let item of response">
   {{ item.summary }}
 </li>
</ul>

1 Ответ

0 голосов
/ 08 декабря 2018

Это потому, что вы смешиваете обещания и синхронизируете функции неправильно, поэтому функция test() ничего не вернет.

Попробуйте добавить обещание к вашему test(): 

test() {
  return new Promise(resolve => { // <-- now test func return promise
    gapi.load("client", () => {
      gapi.client.init({
        apiKey: "API string here",
        discoveryDocs: ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"]
      }).then(() => {
        // code...
      }).then((data) => {
        // code...
        resolve(this.response); // <-- when we have the response, we are resolving the promise
      });
    });
  });
}

И затем используйте это обещание в компоненте: 

this.calendarService.test().then(data => this.response = data);

Подробнее об обещаниях по MDN

...