如何使用angular 6& ;;创建具有复选框列表的可折叠/可扩展/树结构bootstrap 3.3.7 [英] how to create collapsible/expandable/ Tree structure with checkbox list using angular 6 & bootstrap 3.3.7
问题描述
这里我正在尝试使用parent& amp;上的复选框的可折叠/树结构孩子们也，但我不能创造它，我能够创建直到无序列表从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
}，
作者：{
字段：{
关键字：{
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：{
关键字：{
ignore_above：256，
类型：关键字
}
}，
类型： text，
fielddata：true
}，
instrument：{
properties：{
Style：{
字段：{
关键字：{
ignore_above：256，
type：keyword
}
}，
type：text，
fielddata：true
}，
instrumentCode：{
type ：integer
}，
instrumentName：{
type：text
}，
instrumentNumber：{
字段：{
关键字：{
ignore_above：256，
类型：关键字
}
}，
输入：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 =让y of x.value.properties | keyvalue>
< li>
{{y.key}}
< / li>
< / ul>
< / ng-container>
< / ul>
可折叠/树结构
下面是我的stackblitz链接
只需添加输入类型检查并使用[（ngModel）]
< ul class =list-group* ngFor =let x of inf | keyvalue>
< li class =list-group-item>
<！ - 添加输入类型复选框和与x.check的关系 - >
< input type =checkbox[（ngModel）] =x.check>
{{x.key}}< / li>
<！---更改* ngIf以添加x.check条件 - >
< ng-container * ngIf =x.check&& x.value.hasOwnProperty（'properties'）>
< ul * ngFor =让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}]
}，
{
标题：dos，儿童：[
{title：dos-uno，儿童：[
{title：dos-uno}
]}，
{标题：dos-dos}]
}
]
我们可以有一个app.component喜欢
< li * ngFor =let item of data>
< app-li [title] =item.title[children] =item.ch ildren>< /应用利>
< / li>
我们的app-li喜欢
< li（click）=check =！check>
< div [className] =孩子？检查？'向下箭头'：'向上箭头'：'箭头向右'>< / 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>
看到我们用孩子喂app-li
注意：我添加一个< div> with className模拟三角形
更新2
我们可以传递自己的项目itselft
组件变得像
@Component（{
selector：'app -li'，
模板：`< 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 ]
}）
导出类HelloComponent {
@Input（）item：any;
}
应用程序
< li * ngFor =let item of data>
< app-li [item] =item>< / app-li>
< / li>
here i am trying for the collapsible/ tree structure with checkbox on parent & children also but i wasnt able to create it exactly i was able to create till unordered list from the 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 code
<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>
collapsible /tree structure
below is my stackblitz link
https://stackblitz.com/edit/angular-k5tdpe
i can try plugins also but the input data format for the plugins was different angular2-tree plugin & ng2 -tree /ngx-tree so any suggestions
just add a input type check and use [(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>
Updated if you want a "recursive component" its easy. I put an example, you can see the result in stackblitz
Basically a "recursive component is a component that in template has the same component. Typically we use a json model with properties children (yes, you can transform your "complex" json in some that has properties an children) If one time you create a jsondata with children, your json is like, e.g. like
data = [{
title: "uno", children: [
{ title: "uno-uno" }]
},
{
title: "dos", children: [
{ title: "dos-uno",children: [
{ title: "dos-uno" }
]},
{ title: "dos-dos" }]
}
]
We can have a app.component like
<li *ngFor="let item of data">
<app-li [title]="item.title" [children]="item.children"></app-li>
</li>
And our app-li like
<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>
See that we feed the app-li with "children"
NOTE:I add a < div> with className to "simulate" the triangles
Updated 2 We can pass the own item itselft
The component becomes like
@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;
}
And the app
<li *ngFor="let item of data">
<app-li [item]="item" ></app-li>
</li>
这篇关于如何使用angular 6& ;;创建具有复选框列表的可折叠/可扩展/树结构bootstrap 3.3.7的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
