我正在尝试在父节点和子节点上使用复选框的可折叠/树结构。我无法准确地创建它。我能够从 JSON 创建无序列表
{
"properties": {
"host": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
},
"information": {
"properties": {
"filetype": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
},
"author": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
},
"authorcountry": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
}
}
},
"url": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
},
"name": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
},
"instrument": {
"properties": {
"Style": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
},
"instrumentCode": {
"type": "integer"
},
"instrumentName": {
"type": "text"
},
"instrumentNumber": {
"fields": {
"keyword": {
"ignore_above": 256,
"type": "keyword"
}
},
"type": "text",
"fielddata": true
}
}
}
}
}
.html代码
<button class="btn btn-primary" (click)="getData()">getData</button>
<h1>ul element</h1>
<hr>
<ul class="list-group" *ngFor="let x of inf | keyvalue">
<li class="list-group-item">{{x.key}}</li>
<ng-container *ngIf="x.value.hasOwnProperty('properties')">
<ul *ngFor="let y of x.value.properties | keyvalue">
<li>
{{y.key}}
</li>
</ul>
</ng-container>
</ul>
可折叠/树结构。
以下是我的 Stackblitz 链接:
https://stackblitz.com/edit/angular-k5tdpe
我也可以尝试插件,但是插件的输入数据格式是不同的 angular2-tree 插件和 ng2 -tree /ngx-tree,所以任何建议......
只需添加输入类型检查并使用 [(ngModel)]
<ul class="list-group" *ngFor="let x of inf | keyvalue">
<li class="list-group-item">
<!--add a input type checkbox and relation with x.check-->
<input type="checkbox" [(ngModel)]="x.check">
{{x.key}}</li>
<!---change the *ngIf to add the x.check condition-->
<ng-container *ngIf="x.check && x.value.hasOwnProperty('properties')">
<ul *ngFor="let y of x.value.properties | keyvalue">
<li>
{{y.key}}
</li>
</ul>
</ng-container>
</ul>
已更新 如果你想要一个“递归组件”,这很容易。我举了一个例子,你可以在stackblitz
中看到结果基本上,“递归组件是模板中具有相同组件的组件。通常我们使用具有子属性的 json 模型(是的,您可以在具有子属性的某些模型中转换“复杂”json)如果有一次您创建一个带有子项的 jsondata,你的 json 就像,例如像
data = [{
title: "uno", children: [
{ title: "uno-uno" }]
},
{
title: "dos", children: [
{ title: "dos-uno",children: [
{ title: "dos-uno" }
]},
{ title: "dos-dos" }]
}
]
我们可以有一个像这样的app.组件
<li *ngFor="let item of data">
<app-li [title]="item.title" [children]="item.children"></app-li>
</li>
还有我们的应用程序-li喜欢
<li (click)="check=!check">
<div [className]="children?check?'arrow-down':'arrow-up':'arrow-right'"></div>
{{title}}
</li>
<ul *ngIf="children && check">
<ng-container *ngFor="let item of children">
<app-li [title]="item.title" [children]="item.children"></app-li>
</ng-container>
</ul>
看到我们用“孩子”喂养应用程序里
注意:我添加了带有 className 的 < div> 来“模拟”三角形
更新2 我们可以传递自己的项目本身
组件变成这样
@Component({
selector: 'app-li',
template: `<li >
<div (click)="check=!check" [className]="item.children?
check?'arrow-down':'arrow-up':'arrow-right'">
</div>
<input type="checkbox" [(ngModel)]="item.select" >
<span (click)="check=!check">{{item.title}}</span>
</li>
<ul *ngIf="item.children && check">
<ng-container *ngFor="let item of item.children">
<app-li [item]="item" ></app-li>
</ng-container>
</ul>
`,
styleUrls: [ './hello.component.css' ]
})
export class HelloComponent {
@Input() item: any;
}
还有应用程序
<li *ngFor="let item of data">
<app-li [item]="item" ></app-li>
</li>