Angular 如何使用finos/perspectivehttps://perspective.finos.org/ 在8号？_Angular

Angular 如何使用finos/perspectivehttps://perspective.finos.org/ 在8号？

angular

Angular 如何使用finos/perspectivehttps://perspective.finos.org/ 在8号？,angular,Angular,如何在angular 8应用程序中使用finos/perspective Datagrid。作为JSON输入数据，需要作为Datagrid输出。任何示例代码都会很有帮助 GitHub存储库是我创建了一个小演示应用程序。在本例中，数据从csv上传并显示为datagrid。我认为在JSON的情况下应该是相同的其主要思想是提供对webcomponents的支持并使用node.js api 我正在安装@webcomponents/webcomponentsjs作为开发依赖项，以及@finos/pe

如何在angular 8应用程序中使用finos/perspective Datagrid。作为JSON输入数据，需要作为Datagrid输出。任何示例代码都会很有帮助

GitHub存储库是

我创建了一个小演示应用程序。在本例中，数据从csv上传并显示为datagrid。我认为在JSON的情况下应该是相同的

其主要思想是提供对webcomponents的支持并使用node.js api

我正在安装

@webcomponents/webcomponentsjs

作为开发依赖项，以及

@finos/perspective、@finos/perspective-viewer、@finos/perspective-viewer-d3fc、@finos/perspective-viewer-datagrid、@finos/perspective-webpack插件。

在index.html中，我添加了：

<script src="webcomponents/webcomponents-loader.js"></script>
<script>
    if (!window.customElements) {
        document.write('<!--');
    }
</script>
<script src="webcomponents/custom-elements-es5-adapter.js"></script>
<!-- ! DO NOT REMOVE THIS COMMENT, WE NEED ITS CLOSING MARKER -->

在tsconfig.json中：

"allowJs": true,
"allowSyntheticDefaultImports": true,

在angular.json资产中：

{
    "glob": "**/*.js",
    "input": "node_modules/@webcomponents/webcomponentsjs",
    "output": "webcomponents/"
}

在要使用透视图的模块中添加模式：[自定义元素模式]

在组件中添加少量导入：

import perspective, {PerspectiveWorker} from "@finos/perspective";
import "@finos/perspective-viewer";
import "@finos/perspective-viewer-datagrid";

之后，您可以使用

标记并通过

const viewer: HTMLPerspectiveViewerElement = document.getElementsByTagName("perspective-viewer")[0] as HTMLPerspectiveViewerElement;

我已经创建了一个小的演示应用程序。在本例中，数据从csv上传并显示为datagrid。我认为在JSON的情况下应该是相同的