Question

我想用角度6填充来自Google表格的数据表。我正在使用此npm程序包get-sheet-done生成JSONP，并且以这种方式将google工作表中的数据作为json进行访问，并可以将其转换为订阅，以便当人们修改数据时表中的数据发生变化在工作表中。

app.component.ts

import { Component } from '@angular/core';
import * as GetSheetDone from 'get-sheet-done';

export interface Table {
  id: number,
  nombre: string, 
  apellido: string, 
  email: string,
  telefono: string
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';

  docKey: String = "<google sheets document key>";
  sheetNum: number = 1;
  characters: Table[];

constructor() {  }

  ngOnInit() {
    this.getPeople()
    .subscribe((data: Table[])=>{
      this.characters = data;
    });

  }
  getPeople(){
    return GetSheetDone.labeledCols(this.docKey, this.sheetNum).then(sheet=>{
      console.log(sheet);
      sheet.data      
    });
  }       
}

app.component.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Nombre</th>
      <th>Apellido</th>
      <th>Email</th>
      <th>Telefono</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let character of characters">
      <td>{{ character.id }}</td>
      <td>{{ character.nombre }}</td>
      <td>{{ character.apellido }}</td>
      <td>{{ character.email }}</td>
      <td>{{ character.telefono }}</td>
    </tr>
  </tbody>
</table>

<button (click)="getPeople()">Get Data</button>

我得到的错误是

this.getPeople（...）。subscribe不是函数

这是Stackblitz

如果你们还有其他建议可以做我想做的事情，那就欢迎他们

Answer 1

4个简单步骤来弄清楚如何从电子表格标签中获取JSON数据。
不需要特殊的程序包。
https://ng-chicago.github.io/2018/05/24/google-sheets-as-a-json-data-source/

使用上述电子表格的Angular PWA示例

---运行已部署（丑陋）的应用程序
--- https://mypets.glitch.me/#/

---源代码
--- https://github.com/ng-chicago/MyPets

注意：
-这是PWA，因此，如果在提示时添加到主屏幕（A2HS）并使用该图标，它将在独立窗口中打开
-初始化应用程序时将加载所有数据。在需要新数据之前，无需按下按钮。
-由于用于获取数据的服务，如果电子表格中的数据未更改，则单击刷新按钮似乎没有任何反应。如果您看到“开发工具”的“网络”标签，则会看到正在检索的数据。 -请小心.htaccess文件。如果不确定是什么目的，请将其删除。不要部署到您的服务器。
-偷走任何可能有用的部分。
-如果有疑问，请随时在Twitter @AngularChicago上ping我

Answer 2

为了将Google表格文档中的数据加载到Angular应用中，您还可以使用ng-google-sheets-db。我还制作了demo application和stackblitz来展示lib的用法。

您可以使用

进行安装

ng add ng-google-sheets-db

或

npm install ng-google-sheets-db

然后，您需要将GoogleSheetsDbService作为提供者添加到应用程序的模块中，并将Angular的HttpClientModule添加到导入中。

完整文档可在https://github.com/FranzDiebold/ng-google-sheets-db-library#usage上获得。

使用Google表格填充角度表

2 个答案: