Google Sheet API in Angular2/Ionic2 gapi.client.sheet

Question

我写了Angular2/Ionic2应用程序来显示谷歌表格的列表内容。使用Google登录工作正常，但gapi.client.sheet未定义。我应该怎么做才能解决它或有方法代替？

我安装了

npm install --save @types/gapi
npm install --save @types/gapi.auth2

这是我的home.html

<ion-content>
  <pre id="content"></pre>
  <button ion-button id="authorize-button" (click)="handleAuthClick()">Authorize</button>
  <button ion-button id="signout-button" (click)="handleSignoutClick()">Sign Out</button>
</ion-content>

这是我的家。

import { Component, ViewChild} from '@angular/core';
import { AlertController, App, FabContainer, ItemSliding, List, ModalController, NavController, LoadingController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class TalentsPage {
  @ViewChild('talentList', { read: List }) talentList: List;

  constructor(
    public alertCtrl: AlertController,
    public app: App,
    public loadingCtrl: LoadingController,
    public modalCtrl: ModalController,
    public navCtrl: NavController
  ) {}
  ionViewWillEnter() {
    this.app.setTitle('Talents');
    this.updateList();
    this.handleClientLoad();
  }    
  handleClientLoad() {
    gapi.load('client:auth2', this.initClient);
  }
  initClient() {
    gapi.client.init({discoveryDocs: ["https://sheets.googleapis.com/$discovery/rest?version=v4"], clientId: 'xxxx.apps.googleusercontent.com', scope: "https://www.googleapis.com/auth/spreadsheets.readonly"
    }).then(function () {
    this.listMajors();
    this.updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
    });
  }
  updateSigninStatus(isSignedIn) {
    if (isSignedIn) {
      this.listMajors();
    } else {
      alert("doesnt sign in");          
    }
  }
  listMajors() {
        gapi.client.sheets.spreadsheets.values.get({
          spreadsheetId: 'xxxx',
          range: 'All BP!A1:R16'
        }).then(function(response) {
          var range = response.result;
          if (range.values.length > 0) {
            this.appendPre('Name, Major:');
            for (let i = 0; i < range.values.length; i++) {
              var row = range.values[i];
              // Print columns A and E, which correspond to indices 0 and 4.
              this.appendPre(row[0] + ', ' + row[4]);
            }
          } else {
            this.appendPre('No data found.');
          }
        }, function(response) {
          this.appendPre('Error: ' + response.result.error.message);
        });
    }
  appendPre(message) {
    var pre = document.getElementById('content');
    var textContent = document.createTextNode(message + 'n');
    pre.appendChild(textContent);
  }
  handleAuthClick(event) {
    alert("signin");
    gapi.auth2.getAuthInstance().signIn();
    this.listMajors();
  }
  handleSignoutClick(event) {
    alert("signout");
    gapi.auth2.getAuthInstance().signOut();
  }
}

Answer 1

我需要把这个放在我的 .ts 文件中

declare var gapi: any;