如何在 Angular 6/Ionic 4 中使用 fin-hypergrid 库

Question

尝试使用Angular中的fin-hypergrid库，认为导入错误。它不是本机打字稿库，因此不确定如何导入它。

Component/Page

import { Component, OnInit } from '@angular/core';
import * as Hypergrid from 'fin-hypergrid';

@Component({
  selector: 'app-markbook-new',
  templateUrl: './markbook-new.page.html',
  styleUrls: ['./markbook-new.page.scss']
})
export class MarkBookNewPage implements OnInit {

  constructor() {
    const data = [
        {
            "Name": "Alabama",
            "Code": "AL",
            "Capital": "Montgomery",
            "Statehood": "December 14, 1819",
            "Population": 4833722,
            "Area": 52420,
            "House Seats": 7
        }
    ];
    console.log(fin);
    const div = document.querySelector('div#json-example'),
      grid = new fin.Hypergrid(div, { data: data });
  }

  ngOnInit() {
  }

  async ionViewDidEnter() {

  }

}

HTML

<div id="json-example" style="position:relative; width:600px; height:100px"></div>

我收到错误 Cannot Find fin

如果我把import * as Hypergrid from 'fin-hypergrid';改成import * as fin from 'fin-hypergrid';

我得到ERROR Error: Uncaught (in promise): TypeError: fin_hypergrid__WEBPACK_IMPORTED_MODULE_1__.Hypergrid is not a constructor

使用的库：

https://github.com/fin-hypergrid/core

以上示例取自：

https://github.com/fin-hypergrid/build/blob/master/demo/basic.html

Answer 1

我正在使用 fin-hypergrid 3.2.0 version。在这里这个答案将演示如何在 angular 2+.

中使用它

<div id="json-example" #hypergrid></div>

import { Component, OnInit, AfterViewInit } from '@angular/core';
import * as Hypergrid from 'fin-hypergrid';

@Component({
  selector: 'app-markbook-new',
  templateUrl: './markbook-new.page.html',
  styleUrls: ['./markbook-new.page.scss']
})
export class MarkBookNewPage implements OnInit, AfterViewInit {
  protected grid: Hypergrid;

  constructor() {
    const data = [
        {
            "Name": "Alabama",
            "Code": "AL",
            "Capital": "Montgomery",
            "Statehood": "December 14, 1819",
            "Population": 4833722,
            "Area": 52420,
            "House Seats": 7
        }
    ];
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
     this.grid = new Hypergrid('#' + 'json-example',
            {
              data: this._rowList,
              schema: [],
              canvasContextAttributes: { alpha: true }
            });
  }

  async ionViewDidEnter() {

  }

}

而且您不需要 schema: [], canvasContextAttributes: { alpha: true }，这将解决您的问题。但是你需要做更多的工作来让网格工作。

如何在 Angular 6/Ionic 4 中使用 fin-hypergrid 库

How to use fin-hypergrid library in Angular 6/Ionic 4

javascript

typescript

angular

fin-hypergrid