将 google 日历数据从服务传递到组件

Question

数组未从服务传递到组件：

在 service.ts 页面的 test() 函数中，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

课-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() {
  }

}

课-summary.component.html

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

Answer 1

那是因为您以错误的方式混合了 promises 和同步函数，所以 test() 函数不会 return 任何东西。

尝试向您的 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
      });
    });
  });
}

然后在组件中使用这个promise：

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

Learn more 关于 MDN 上的承诺

将 google 日历数据从服务传递到组件

Passing google calendar data from service to component

arrays

google-calendar-api

typescript

google-api-js-client

angular