我正在尝试使用普通的html表创建树表。
{
"policy": [
{
"id": "a1",
"name": "policy 1.1",
"categories": [
{
"id": "c1",
"name": "category 1.1",
"subCategories": [
{
"id": "s1",
"name": "subCategory 1.1"
},
{
"id": "s2",
"name": "subCategory 1.2"
}
]
},
{
"id": "c2",
"name": "category 1.2",
"subCategories": [
{
"id": "s5",
"name": "subCategory 2.1"
},
{
"id": "s6",
"name": "subCategory 2.2"
}
]
}
]
},
{
"id": "a2",
"name": "policy 1.2",
"categories": [
{
"id": "c4",
"name": "category 1.1",
"subCategories": [
{
"id": "s13",
"name": "subCategory 1.1"
}
]
},
{
"id": "c5",
"name": "category 1.2",
"subCategories": [
{
"id": "s17",
"name": "subCategory 2.1"
},
{
"id": "s18",
"name": "subCategory 2.2"
}
]
},
{
"id": "c6",
"name": "category 1.3",
"subCategories": [
{
"id": "s21",
"name": "subCategory 3.1"
}
]
}
]
}
]
}
我不想使用任何库。
ts文件：
getAllAuditPolicies() {
this.policyService
.getAllPolicies()
.subscribe(data => {
this.dropdownData = data;
});
}
打开类别
open(i){
this.dropdownData1 = this.dropdownData[i].categories;
console.log("dataas1", this.dropdownData1);
}
打开子类别
subOpen(j){
this.dropdownData2 = this.dropdownData1[j].subCategories;
console.log("dataas2", this.dropdownData2);
}
HTML文件：
<div class="container">
<div class="row">
<table class="table">
<tr class="panel-heading bgOrg">
<th class="th-font"> </th>
<th class="th-font">Name</th>
</tr>
<tr *ngFor='let data of dropdownData; let i=index' (click)="open(i)" >
<td >+</td>
<td>{{data.name}}</td>
</tr>
<tr *ngFor='let group of dropdownData1; let j=index' (click)="subOpen(j)">
<td>+</td>
<td>{{group.name}}</td>
</tr>
<tr *ngFor='let subgroup of dropdownData2; let k=index' >
<td>+</td>
<td>{{subgroup.name}}</td>
</tr >
<tr></tr>
</table>
</div>
</div>
使用此方法，表格显示了详细信息。
问题：
但是，policy1.1的类别是category1.1和category1.2。它应该在policy1.1下方显示为嵌套。但是，如果我单击policy1.1，该表将显示policy1.2以下的值（将policy1.1的值扩展到所有策略下方）。
相同的问题正在影响子类别供参考，请附加stackblitz实施，
解决该问题我想做什么。
有人可以帮我吗？
预先感谢
https://stackblitz.com/edit/angular-gxeins?file=src%2Fapp%2Fapp.component.html
<div class="container">
<div class="row">
<table class="table">
<tr class="panel-heading bgOrg">
<th class="th-font"> </th>
<th class="th-font">Id</th>
<th class="th-font">Name</th>
</tr>
<tr *ngFor='let policy of data.policy; let i=index' (click)="open(i)">
<td>+</td>
<td>{{policy.id}}</td>
<td>{{policy.name}}</td>
</tr>
<tr *ngFor='let category of dropdownData1; let j=index' (click)="subOpen(j)">
<td> +</td>
<td>{{category.id}}</td>
<td>{{category.name}}</td>
</tr>
<tr *ngFor='let subcategory of dropdownData2; let k=index'>
<td> +</td>
<td>{{subcategory.id}}</td>
<td>{{subcategory.name}}</td>
</tr>
<tr></tr>
</table>
</div>
</div>
<table class="table">
<thead>
<tr>
<th></th>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor='let policy of data.policy'>
<tr>
<td (click)="policy.expand=!policy.expand">+</td>
<td>{{policy.id}}</td>
<td>{{policy.name}}</td>
</tr>
<ng-container *ngIf="policy.expand && policy.categories && policy.categories.length>0">
<ng-container *ngFor='let category of policy.categories'>
<tr>
<td></td>
<td (click)="category.expand=!category.expand"> +</td>
<td>{{category.id}}</td>
<td>{{category.name}}</td>
</tr>
<ng-container *ngIf="category.expand && category.subCategories && category.subCategories.length>0">
<ng-container *ngFor='let subcategory of category.subCategories'>
<tr>
<td></td>
<td></td>
<td> +</td>
<td>{{subcategory.id}}</td>
<td>{{subcategory.name}}</td>
</tr>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</tbody>
</table>
data = {
policy: [
{
id: "a1",
name: "policy 1.1",
expand:false,
categories: [
{
id: "c1",
name: "category 1.1",
expand:false,
subCategories: [
{
id: "s1",
name: "subCategory 1.1"
},
{
id: "s2",
name: "subCategory 1.2"
}
]
},
{
id: "c2",
name: "category 1.2",
expand:false,
subCategories: [
{
id: "s5",
name: "subCategory 2.1"
},
{
id: "s6",
name: "subCategory 2.2"
}
]
}
]
},
{
id: "a2",
name: "policy 1.2",
expand:false,
categories: [
{
id: "c4",
name: "category 1.1",
expand:false,
subCategories: [
{
id: "s13",
name: "subCategory 1.1"
}
]
},
{
id: "c5",
name: "category 1.2",
expand:false,
subCategories: [
{
id: "s17",
name: "subCategory 2.1"
},
{
id: "s18",
name: "subCategory 2.2"
}
]
},
{
id: "c6",
name: "category 1.3",
expand:false,
subCategories: [
{
id: "s21",
name: "subCategory 3.1"
}
]
}
]
}
]
};