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

尝试在Angular中使用fin hypergrid库时，认为导入错误。它不是本机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

我得到错误

找不到fin

如果我将

import*从'fin Hypergrid'更改为Hypergrid从“fin hypergrid”导入到
导入*作为fin

我得到
错误错误：Uncaught（承诺中）：TypeError:fin\u hypergrid\u网页包\u IMPORTED\u MODULE\u 1\u。hypergrid不是构造函数

使用的图书馆：


上述示例摘自：

我正在使用fin hypergrid 3.2.0。在这里，这个答案将演示如何在angular 2+中使用它



从'@angular/core'导入{Component，OnInit，AfterViewInit}；
从“fin Hypergrid”导入*作为Hypergrid；
@组成部分({
选择器：“应用程序标记簿新建”，
templateUrl:'./markbook new.page.html'，
样式URL:['./markbook new.page.scss']
})
导出类MarkBookNewPage实现OnInit，AfterViewInit{
受保护网格：Hypergrid；
构造函数（）{
常数数据=[
{
“姓名”：“阿拉巴马州”，
“代码”：“AL”，
“首都”：“蒙哥马利”，
“州”：“1819年12月14日”，
“人口”：4833722，
“面积”：52420，
“众议院席位”：7个
}
];
}
恩戈尼尼特（）{
}
ngAfterViewInit（）{
this.grid=new Hypergrid（“#”+“json示例”，
{
数据：该行列表，
架构：[]，
canvasContextAttributes:{alpha:true}
});
}
异步IonViewDiCenter（）{
}
}

您不需要
schema:[]，canvasContextAttributes:{alpha:true}
，这将解决您的问题。但您需要在使网格正常工作方面做更多的工作。
我正在使用fin hypergrid 3.2.0。在这里，这个答案将演示如何在angular 2+中使用它



从'@angular/core'导入{Component，OnInit，AfterViewInit}；
从“fin Hypergrid”导入*作为Hypergrid；
@组成部分({
选择器：“应用程序标记簿新建”，
templateUrl:'./markbook new.page.html'，
样式URL:['./markbook new.page.scss']
})
导出类MarkBookNewPage实现OnInit，AfterViewInit{
受保护网格：Hypergrid；
构造函数（）{
常数数据=[
{
“姓名”：“阿拉巴马州”，
“代码”：“AL”，
“首都”：“蒙哥马利”，
“州”：“1819年12月14日”，
“人口”：4833722，
“面积”：52420，
“众议院席位”：7个
}
];
}
恩戈尼尼特（）{
}
ngAfterViewInit（）{
this.grid=new Hypergrid（“#”+“json示例”，
{
数据：该行列表，
架构：[]，
canvasContextAttributes:{alpha:true}
});
}
异步IonViewDiCenter（）{
}
}

您不需要
schema:[]，canvasContextAttributes:{alpha:true}
，这将解决您的问题。但您需要在使网格正常工作方面做更多的工作。
尝试将导入更改为：
从“fin Hypergrid/src/Hypergrid”导入Hypergrid
然后可以将网格实例化为
新Hypergrid（…）
（而不是
fin.Hypergrid（…）
…）尝试将导入更改为：
从“fin Hypergrid/src/Hypergrid”导入Hypergridnew Hypergrid（…）
（而不是
fin.Hypergrid（…）
…）
<div id="json-example" style="position:relative; width:600px; height:100px"></div>