要创建一个Angular 6树形图,你可以使用第三方库ngx-treeview。以下是一个包含代码示例的解决方法:
npm install ngx-treeview --save
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TreeviewModule } from 'ngx-treeview';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
TreeviewModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import { TreeviewItem } from 'ngx-treeview';
@Component({
selector: 'app-root',
template: `
Angular 6 Treeview Example
`
})
export class AppComponent {
items: TreeviewItem[] = [
new TreeviewItem({
text: 'Item 1',
value: 1,
children: [
{
text: 'Item 1.1',
value: 11,
children: [
{
text: 'Item 1.1.1',
value: 111
},
{
text: 'Item 1.1.2',
value: 112
}
]
},
{
text: 'Item 1.2',
value: 12
}
]
}),
new TreeviewItem({
text: 'Item 2',
value: 2
})
];
onSelectedChange(event: any) {
console.log(event);
}
}
标签来显示树形图。
Angular 6 Treeview Example
ng serve
打开浏览器并访问http://localhost:4200,你将看到一个带有树形图的页面。
这就是创建一个Angular 6树形图的解决方法。你可以根据你的需求进行修改和定制。