Angular中的Google Sheets API [英] Google Sheets API in Angular

问题描述

我试图找到如何在Angular中使用Google Sheets API.文档页面上没有对Angular的引用.我尝试了此，它似乎没有用.

I am trying to find how to use the Google Sheets API in Angular. There is no reference to Angular on the documentation page. I have tried this and it doesn't seem to be working.

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

Can someone direct me on how I can use the Google Sheets API inside of my Angular application?

我当前正在使用Angular 8

I am currently using Angular 8

推荐答案

我正是为此用例制作了一个Angular库！

I made an Angular library exactly for this use case!

使用 ng-google-sheets-db ，您可以加载Google表格中的数据变得轻而易举.您可以查看 Stackblitz示例应用程序.

With ng-google-sheets-db you can load data from Google Sheets in a breeze. You may check out the Stackblitz example app.

ng add ng-google-sheets-db

或

npm install ng-google-sheets-db

用法

Google表格

1. 创建 Google表格:
   • 第一行必须为标题.
   • 以下几行是您的条目，每行一个条目.
   • 您可能有一个 active 列，您可以使用该列启用或禁用行/条目.
   • 此处.
   .li>

1. Create a Google Sheet:
   • The first row must be the header.
   • The following rows are your entries, one entry per row.
   • You may have an active column, with which you can enable or disable rows/entries.
   • A Google Sheets demo spreadsheet is available here.

• [文件]->[发布到网络]->[发布]
• 获取电子表格ID (即 1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA ):它是Google电子表格URL的一部分.
• 获取工作表ID :工作表ID从1开始递增.

• [File] -> [Publish to the web] -> [Publish]
• Get the Spreadsheet ID (i.e. 1gSc_7WCmt-HuSLX01-Ev58VsiFuhbpYVo8krbPCvvqA): It is part of the Google spreadsheet URL.
• Get the Worksheet ID: The Worksheet IDs are increasing numbers, starting at 1.

角度

将 GoogleSheetsDbService 作为提供程序添加到应用程序的模块，并将Angular的 HttpClientModule 添加到导入:

Angular

Add GoogleSheetsDbService to your app's module as a provider and Angular's HttpClientModule to the imports:

import { HttpClientModule } from '@angular/common/http';

import { GoogleSheetsDbService } from 'ng-google-sheets-db';

@NgModule({
  ...
  imports: [
    HttpClientModule,
    ...
  ],
  providers: [ GoogleSheetsDbService ],
  ...
})
export class AppModule { }

导入并注入到组件的构造函数中:

Import and inject into your component's constructor:

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', 1, characterAttributesMapping);
  }

属性映射

attributesMapping 将Google电子表格列映射到您的结果对象.

Attributes Mapping

The attributesMapping maps the Google spreadsheet columns to to your outcome object.

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 .

For example, the Google spreadsheet column Email Address is mapped to the outcome object attribute email.

contact 是嵌套对象的示例.您可以定义 _prefix 作为嵌套对象的所有列的前缀.

contact is an example of a nested object. You may define a _prefix as a prefix for all columns of the nested object.

技能是列表的示例.您需要为列表的所有列设置 _listField 和 _prefix .在此示例中，所有以 Skill 开头且数量递增的列都是列表的一部分，即 Skill 1 ， Skill 2 等.

skills is an example of a list. You need to set _listField and a _prefix for all columns of the list. In this example, all columns starting with Skill and an increasing number are part of the list, i.e. Skill 1, Skill 2, etc.

它带有逐步使用指南和演示应用程序！

这篇关于Angular中的Google Sheets API的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！