Cytoscape不能读取null的属性'className'。

Question

我正在尝试将cytoscape整合到Angular应用程序中。

首先，我下载了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 }});

当我创建_graphData 根据ngx-cytoscape文档的规定 像这样。

this._graphData = { nodes, edges };

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

当我试图按照这个演示 http:/embed.plnkr.coO7mWEfZuIhhtahdAhsAM。 并将 _graphData 包裹到 cytoscape 对象中以访问 "style []"，我得到以下错误。

类型错误：无法读取null的 "className "属性。

请问我做错了什么，或者如何在Angular应用中应用cytoscape的样式？

Answer 1

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

你指的是 document.getElementById('cy')......你可能忘了加上 钹 元素或检查拼写