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

Question

尝试在Angular中使用fin-hypergrid库，认为导入错误。它不是 native typescript 库，因此不确定如何导入它。

组件/页面

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>

我收到错误找不到fin

如果我将 import * as Hypergrid from 'fin-hypergrid'; 更改为 import * as fin from 'fin-hypergrid';

我得到错误错误:未捕获( promise ):TypeError:fin_hypergrid__WEBPACK_IMPORTED_MODULE_1__.Hypergrid不是构造函数

使用的库:

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 }，这将解决您的问题。但您需要付出更多努力才能让网格发挥作用。