如何在Angular 4中包含canvas datagrid

我正试图在Angular 4项目中包括以下库，但在这样做时遇到困难：-

我跑过：-

npm install canvas-datagrid

但当我尝试在ts文件中使用以下代码时：-

<canvas-datagrid class="myGridStyle" data="data can go here too">[
{"col1": "row 1 column 1", "col2": "row 1 column 2", "col3": "row 1 
column 3"},
{"col1": "row 2 column 1", "col2": "row 2 column 2", "col3": "row 2 
column 3"}
]</canvas-datagrid>

---

在angular 4项目中使用它需要采取哪些步骤，因为文档中似乎没有包含angular？

我使用angular 7.2进行了测试

在app.component.ts中：

import * as canvasDatagrid from 'canvas-datagrid';

//to create grid
var grid = canvasDatagrid({
      parentNode: document.getElementById('gridctr'),
      data: []
    });

//then set test data
grid.data = [
    {col1: 'foo', col2: 0, col3: 'a'},
    {col1: 'bar', col2: 1, col3: 'b'},
    {col1: 'baz', col2: 2, col3: 'c'}
];

在app.component.html中，您应该有一个相应的网格容器：

---

就是这样。

在安装npm包

canvas datagrid

之后，我开始在我的组件中包括库：

import * as canvasDatagrid from 'canvas-datagrid';

然后在我的html文件中添加了模板：

<div id="grid"></div>

在上面的代码中，我已将网格的数据初始化为空数组。 因此，对于数组的初始化，我写了以下几行：

addData(){
 let data= [];  
 for(let i =0;i<1000;i++){
 data.push({'Time' : new Date() , 
'Message' : 'HELLO' );
  }
 this.grid.data 
 =this.grid.data.concat(data);
} 

addData（）{
让数据=[]；
for（设i=0；i
ngOnInit(){
 this.grid = canvasDatagrid({
  parentNode: 
 document.getElementById('grid'),
  data: [],
  schema: [
    {
      name: 'Time'
    },
    {
      name: 'Message' 
    } 
   ]
 });
 this.grid.style.height = 'calc(100vh - 
 229px)';
 this.grid.style.width = '100%';
 this.addData();
} 

addData(){
 let data= [];  
 for(let i =0;i<1000;i++){
 data.push({'Time' : new Date() , 
'Message' : 'HELLO' );
  }
 this.grid.data 
 =this.grid.data.concat(data);
}