Cytoscape 无法读取 null 的属性“className”

Question

我正在尝试将 cytoscape 集成到角度应用程序中。

首先我下载的是：

npm i --save ngx-cytoscape cytoscape @types/cytoscape

然后我将 Cytoscape 库导入到模块中

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ItemComponent } from './item/item.component';

import { CytoscapeModule } from 'ngx-cytoscape';

@NgModule({
  imports: [
    CommonModule,
    CytoscapeModule
  ],
  declarations: [
    ItemComponent
  ]
})
export class DashboardModule { }

并更新了 Angular.json

"scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
              "node_modules/cytoscape/dist/cytoscape.js"
            ]

从现在开始我可以使用 cytoscape
这是我的 html

<div id="cy" class='row justify-content-center cytograph mt-2' *ngIf="graphData">
  <ngx-cytoscape [elements]="graphData"></ngx-cytoscape>
</div>

这是我的打字稿文件

@Component({
    selector: 'app-item',
    templateUrl: './item.component.html',
    styleUrls: ['./item.component.css']
})
export class ItemComponent {
    traces: Trace[];

    private _graphData: any;

    constructor(
        private traceService: TraceService
    ) { }

    // event that triggers when button is clicked
    showDetails(correlationId: string): void {
        this.traceService.findByCorrelationId(correlationId)
            .subscribe(
                (traces) => {
                    this.traces = traces;
                },
                (error) => {
                    // error handling
                },
                () => {
                    this.createGraphData();
                }
            );
    }

    createGraphData(): void {
        const nodes: Node[] = [];
        const edges: Edge[] = [];
        // some logic...
        this._graphData = cytoscape ({ container: document.getElementById('cy'), elements: {nodes, edges }});
    }

    get graphData(): any {
        return this._graphData;
    }

    set graphData(value: any) {
        this._graphData = value;
    }
}

问题就出在这行代码

this._graphData = cytoscape ({ container: document.getElementById('cy'), elements: {nodes, edges }});

当我根据 ngx-cytoscape 文档创建 _graphData 时，如下所示：

this._graphData = { nodes, edges };

一切都很完美，问题是我不知道如何应用“样式”，ngx 演示有效，但它们没有显示如何访问样式 []。

当我尝试遵循此演示http://embed.plnkr.co/O7mWEfZuIhhtahdAhsAM/并将 _graphData 包装到 cytoscape 对象中以便访问“style []”时，我收到以下错误：

类型错误：无法读取 null 的属性“className”

知道我做错了什么或者如何在角度应用程序中应用 cytoscape 中的样式吗？谢谢

Answer 1

我知道，这是一个迟到的答案，但会对某人有所帮助。我遇到了同样的错误并执行了以下操作

你指的是document.getElementById('cy'). 您可能忘记在 html 中添加cy元素或检查拼写