我是 NGX-GRAPH 的新手。我正在尝试构建一个有向图。这是我的代码：
ngx-graph.component.html：
<ngx-graph *ngIf="nodes?.length > 0 && links?.length > 0"
[links]="links"
[nodes]="nodes"></ngx-graph>
ngx-graph.component.ts：
import { Component, OnInit } from '@angular/core';
import { ServerService } from '../server.service';
import { ActivatedRoute, Router } from '@angular/router';
import { Edge, Node} from '@swimlane/ngx-graph';
@Component({
selector: 'app-ngx-graph',
templateUrl: './ngx-graph.component.html',
styleUrls: ['./ngx-graph.component.scss']
})
export class NgxGraphComponent implements OnInit {
id: number;
constructor(private serverService: ServerService, private route: ActivatedRoute) { }
nodes: Node[] = [];
links: Edge[] = [];
ngOnInit() {
this.id = +this.route.snapshot.params.id;
this.serverService.getGraphGivenEndpointId(this.id).subscribe(
response => { this.nodes = response[0];
this.links = response[1];
console.log(this.nodes);
}
);
}
}
这是我的服务返回的 JSON：
(2) [{…}, {…}]
0: {id: "first", label: "A", meta: {…}, dimension: {…}, position: {…}, …}
1: {id: "second", label: "B", meta: {…}, dimension: {…}, position: {…}, …}
2: {id: "first", label: "A", meta: {…}, dimension: {…}, position: {…}, …}
length: 3
__proto__: Array(0)
服务器服务.ts：
@Injectable()
export class ServerService {
constructor(private http: HttpClient, private elencoEndpointService: ElencoEndpointService) {}
getGraphGivenEndpointId(id: number) {
return this.http.get('http://localhost:8080/app/endpoint?id=' + id);
}
}
使用此代码，该库可以正常工作。我获得了基本图表，例如“快速入门”页面https://swimlane.github.io/ngx-graph/#/#outputs中的图表。
但是，如果我尝试自定义仅添加此部分而不更改其他任何内容的节点：
<ng-template #nodeTemplate let-node>
<svg:g class="node">
<svg:rect [attr.width]="node.dimension.width" [attr.height]="node.dimension.height"
[attr.fill]="node.data.color" />
<svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">{{node.label}}
</svg:text>
</svg:g>
</ng-template>
我的ngx-graph.component.html变为：
<ngx-graph *ngIf="nodes?.length > 0 && links?.length > 0"
[links]="links"
[nodes]="nodes"
>
<ng-template #nodeTemplate let-node>
<svg:g class="node">
<svg:rect [attr.width]="node.dimension.width" [attr.height]="node.dimension.height"
[attr.fill]="node.data.color" />
<svg:text alignment-baseline="central" [attr.x]="10" [attr.y]="node.dimension.height / 2">{{node.label}}
</svg:text>
</svg:g>
</ng-template>
</ngx-graph>
图中的节点消失，边缘仍然显示但没有节点。我在控制台或角度没有错误。
我还将这段代码添加到我的 ngx-graph.component.ts 中，以触发更新，但没有任何改变：
this.nodes.forEach(element => {
this.nodes.push(element);
this.nodes = [...this.nodes];
});
这是我的app.module.ts：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {RouterModule, Routes, Router} from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatSidenavModule} from '@angular/material/sidenav';
import { MainNavComponent } from './main-nav/main-nav.component';
import { LayoutModule } from '@angular/cdk/layout';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { MatListModule } from '@angular/material/list';
import { AddEndpointComponent } from './add-endpoint/add-endpoint.component';
import {MatDividerModule} from '@angular/material/divider';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatInputModule} from '@angular/material/input';
import { ElencoEndpointComponent } from './elenco-endpoint/elenco-endpoint.component';
import { ElencoEndpointService } from './elencoEndpoint.service';
import { HomePageComponent } from './home-page/home-page.component';
import { HttpClientModule } from '@angular/common/http';
import { ServerService } from './server.service';
import { NgxGraphModule } from '@swimlane/ngx-graph';
import { NgxGraphComponent } from './ngx-graph/ngx-graph.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {ScrollingModule} from '@angular/cdk/scrolling';
import {A11yModule} from '@angular/cdk/a11y';
import {TextFieldModule} from '@angular/cdk/text-field';
const appRoutes: Routes = [
{path: '', component: HomePageComponent},
{path: 'add-endpoint', component: AddEndpointComponent},
{path: 'view-endpoint', component: ElencoEndpointComponent},
{path: 'view-endpoint/:id', component: NgxGraphComponent},
];
@NgModule({
declarations: [
AppComponent,
MainNavComponent,
AddEndpointComponent,
ElencoEndpointComponent,
HomePageComponent,
NgxGraphComponent,
],
imports: [
BrowserModule,
HttpClientModule,
RouterModule.forRoot(appRoutes),
AppRoutingModule,
BrowserAnimationsModule,
MatToolbarModule,
MatSidenavModule,
LayoutModule,
MatButtonModule,
MatIconModule,
MatListModule,
MatDividerModule,
MatFormFieldModule,
MatInputModule,
NgxGraphModule,
FormsModule,
ReactiveFormsModule,
ScrollingModule,
A11yModule,
TextFieldModule,
],
providers: [ElencoEndpointService, ServerService],
bootstrap: [AppComponent]
})
export class AppModule { }
我遵循这个：
快速开始安装包：npm install @swimlane/ngx-graph --save
将 NgxGraphModule 导入你的 Angular 模块
添加 ngx-graph 组件
问题是什么？
也许我必须导入快速入门页面中未指定的其他内容？
提前致谢。