Question

我正在尝试将细胞空间整合到角度应用中。

首先下载：

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

然后我将Cytospace库导入模块

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"
            ]

从现在开始，我可以使用细胞空间
这是我的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 accoring to ngx-cytospace documentation时：

this._graphData = { nodes, edges };

一切正常，问题是我不知道如何应用'styles'ngx演示作品，但是它们没有显示如何访问style []。

当我尝试遵循此演示http://embed.plnkr.co/O7mWEfZuIhhtahdAhsAM/并将_graphData包装到细胞空间对象中以使用“样式[]”时，出现以下错误：

TypeError：无法读取null的属性“ className”

有人知道我做错了什么，或者在角度应用中如何在细胞空间中应用样式？谢谢

Answer 1

我知道，这是一个较晚的答案，但会有所帮助。我遇到了相同的错误，并执行了以下操作

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

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

1 个答案: