我正在尝试了解如何在 Angular 中使用 Google Sheets API。 documentation page 上没有提到 Angular。我已经尝试过this，但它似乎不起作用。
谁能指导我如何在 Angular 应用程序中使用 Google Sheets API？
我目前正在使用 Angular 8
【问题讨论】：
我为这个用例制作了一个 Angular 库！
使用ng-google-sheets-db，您可以轻而易举地从 Google 表格中加载数据，并使用Google Sheets 作为 Angular 应用的（只读）后端！您可以查看Stackblitz example app。
ng add ng-google-sheets-db
或
npm install ng-google-sheets-db
1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA）：它是 Google 电子表格 URL 的一部分。一个很好的概述指南是Get started as a Workspace developer。
将GoogleSheetsDbService 作为提供者添加到您应用的模块中，并将Angular 的HttpClientModule 添加到导入中：
import { HttpClientModule } from '@angular/common/http';
import { API_KEY, GoogleSheetsDbService } from 'ng-google-sheets-db';
@NgModule({
...
imports: [
HttpClientModule,
...
],
providers: [
{
provide: API_KEY,
useValue: <YOUR_GOOGLE_SHEETS_API_KEY>,
},
GoogleSheetsDbService
],
...
})
export class AppModule { }
导入并注入到组件的构造函数中：
import { GoogleSheetsDbService } from 'ng-google-sheets-db';
@Component({
...
})
export class YourComponent implements OnInit {
characters$: Observable<Character[]>;
constructor(private googleSheetsDbService: GoogleSheetsDbService) { }
ngOnInit(): void {
this.characters$ = this.googleSheetsDbService.get<Character>('1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA', "Characters", characterAttributesMapping);
}
attributesMapping 将 Google 电子表格列映射到您的结果对象。
const attributesMapping = {
id: "ID",
name: "Name",
email: "Email Address",
contact: {
_prefix: "Contact ",
street: "Street",
streetNumber: "Street Number",
zip: "ZIP",
city: "City",
},
skills: {
_prefix: "Skill ",
_listField: true,
},
};
例如，Google 电子表格列 电子邮件地址 映射到结果对象属性 email。
contact 是嵌套对象的示例。您可以将_prefix 定义为嵌套对象所有列的前缀。请注意，_prefix 可能需要一个尾随空格。
skills 是一个列表示例。您需要为列表的所有列设置_listField 和_prefix。在此示例中，所有以 _Skill _ 开头且数量不断增加的列都是列表的一部分，即 Skill 1、Skill 2 等。请注意 _prefix可能需要一个尾随空格。
它带有一个step by step usage guide 和一个demo application！
【讨论】：
查看这篇文章：http://leifwells.com/2016/06/09/ionic-2--angular-2-using-a-google-spreadsheet-as-a-data-source/
您不需要任何外部包，只需对您的工作表执行 http 请求。
考虑到上述情况，您可以尝试以下方法：
将您的工作表发布到网络：
转到您的 Google 表格，然后选择
File > Publish to the Web选项最终会为您提供一个其中包含 id 的 URL 这很重要。在我们的例子中，url 如下所示：
https://docs.google.com/spreadsheets/d/15Kndr-OcyCUAkBUcq6X3BMqKa_y2fMAXfPFLiSACiys/pubhtml这个url中的id是：
15Kndr-OcyCUAkBUcq6X3BMqKa_y2fMAXfPFLiSACiys
创建一个 Google 表格提供者（使用第一个链接作为参考）：
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { map } from 'rxjs/operators';
@Injectable()
export class GoogleDriveProvider {
data: any = null;
constructor(public http: Http) { }
public getSheetData(): Observable<any> {
const sheetId = '15Kndr-OcyCUAkBUcq6X3BMqKa_y2fMAXfPFLiSACiys';
const url = `https://spreadsheets.google.com/feeds/list/${sheetId}/od6/public/values?alt=json`;
return this.http.get(url)
.pipe(
map((res: any) => {
const data = res.feed.entry;
const returnArray: Array<any> = [];
if (data && data.length > 0) {
data.forEach(entry => {
const obj = {};
for (const x in entry) {
if (x.includes('gsx$') && entry[x].$t) {
obj[x.split('$')[1]] = entry[x]['$t'];
}
}
returnArray.push(obj);
});
}
return returnArray;
})
);
}
}
注意：该示例使用的是 Angular 8。
【讨论】：