angular - Angular 中的 Google 表格 API

Question

我正在尝试找到如何在 Angular 中使用 Google Sheets API。 documentation page 上没有对 Angular 的引用.我试过this它似乎没有工作。

有人可以指导我如何在 Angular 应用程序中使用 Google Sheets API 吗？

我目前正在使用 Angular 8

Answer 1

我为这个用例制作了一个 Angular 库!
与 ng-google-sheets-db您可以轻而易举地从 Google 表格加载数据并使用 Google Sheets作为 Angular 应用程序的(只读)后端!您可以查看Stackblitz example app .
安装

ng add ng-google-sheets-db

或者

npm install ng-google-sheets-db

用法
谷歌表格

创建 Google Sheet :

第一行必须成为标题。

以下行是您的条目，每行一个条目。

您可能有一个事件列，您可以使用它启用或禁用行/条目。

提供 Google 表格演示电子表格 here .

分享您的工作表:

[文件] → [分享] → 在模式底部的“获取链接”中单击[更改为知道链接的任何人] 为“查看者”。

获取电子表格 ID(即 1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA):它是 Google 电子表格 URL 的一部分。

获取工作表名称:工作表的名称可以在 Google 电子表格的底部找到。

可选:启用2-Step Verification 可能是个好主意。为你的谷歌帐户，如果你还没有这样做:wink:。

谷歌云平台 (GCP)
一个很好的概述指南是 Get started as a Workspace developer .

在 Google Cloud Console 中创建一个新项目.

启用 Google Sheets API:[APIs & Services] → [Enable APIs and Services] → 搜索“Google Sheets API” → [ENABLE]。

创建 API key :[APIs & Services] → [Credentials] → [+ CREATE CREDENTIALS] → [API key] → [RESTRICT KEY] → 在“应用程序限制”中选择“HTTP 引用者(网站)”和“网站限制”并在“API 限制”中选择“限制键”并选择“Google Sheets API”→[SAVE]。

获取生成的 API key 。

Angular
添加 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 { }

导入并注入(inject)组件的构造函数:

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 !