我在类别，子类别和政策方面有3个Apis。
例如：
“ https://restapi.com/project”。
1。类别
In the case of category, I have to pass the body(raw data) as above json for the above Api
{
"startIndex":"1",
"count":"150",
"groupBy":"category",
"searchTerm":"PROJECT:project1"
}
Api响应：列出所有类别
{ "data":
[
{
projectName:null,
categoryName: category1,
subCategoryName:null,
controlName:null
},
{
projectName:null,
categoryName: category2,
subCategoryName:null,
controlName:null
}
so on....
]
}
2。subCategory
In the case of sub-category, I have to pass the body(raw data) as above json for the above Api
{
"startIndex":"1",
"count":"150",
"groupBy":"subcategory",
"searchTerm":"PROJECT:projectName1,CATEGORY: category1"
}
Api响应：列出了类别1的所有子类别（因为我们通过categoryName给出searchTerm）
{ "data":
[
{
projectName:null,
categoryName: null,
subCategoryName: subcategory1,
controlName:null
},
{
projectName:null,
categoryName: null,
subCategoryName: subcategory2,
controlName:null
}
so on....
]
}
2。Control
In the case of control, I have to pass the body(raw data) as above json for the above Api
{
"startIndex":"1",
"count":"150",
"groupBy":"subcategory",
"searchTerm":"PROJECT:projectName1,SUB-CATEGORY: subcategory1"
}
Api Response：列出了子类别1的所有控件（因为我们通过子类别名称给出searchTerm）
{ "data":
[
{
projectName:null,
categoryName: null,
subCategoryName: null,
controlName: control1
},
{
projectName:null,
categoryName: null,
subCategoryName: null,
controlName: control2
}
so on....
]
}
[当我打开第一个策略时，然后打开下一个。但是第二个策略的类别会在第一个策略中自动更新。
为了调用这些Apis，我对getCategory（），getSubcategory（），getControl（）使用了三种get方法。
我正在附加stackblitz示例..
在stackBlitz中，我使用了三种方法（例如我使用的方法）
即
open（i）====>我获取索引，我获取策略值的值（但是在我的Api中，我必须发送categoryName来获取子类别）
subOpen（i）====>我使用index，j值来获取subCategory值（但在我的Api中，我必须发送subCategory来获取控件）
这里，https://stackblitz.com/edit/angular-9q4fbn?file=src%2Fapp%2Fapp.component.html。
您能告诉我如何解决这个问题吗？
您的数据已经进行了结构化，可以将其绑定到视图。无需微管理对数据树各部分的引用。
您遇到的逻辑问题是，即使您遍历树中的类别，您仍然绑定到subCategories的相同引用。将参考更新为dropdownData1或dropdownData2会更改所有类别的显示。
实际上，您想要做的事情要简单得多。只需按原样使用现有数据结构即可。
https://stackblitz.com/edit/angular-dpziva
这是新视图：
<ng-container *ngFor='let policy of dropdownData'>
<tr>
<td (click)="policy.expand = !policy.expand">
<span class="{{policy.expand ?'fa fa-angle-down':'fa fa-angle-right'}}"></span>
<span>{{policy.name}}</span>
</td>
<td class="text-center">
<span class="label success">{{policy.policyName}}</span>
</td>
</tr>
<ng-container *ngIf="policy.expand && policy.categories && policy.categories.length">
<ng-container *ngFor='let category of policy.categories'>
<tr>
<td (click)="category.expand = !category.expand">
<span style="margin-left: 20px;" class="{{category.expand ?'fa fa-angle-down':'fa fa-angle-right'}}"></span>
<span>{{category.name}}</span>
</td>
<td class="text-center">
<span class="label success">{{category.categoryName}}</span>
</td>
</tr>
<ng-container *ngIf="category.expand && category.subCategories && category.subCategories.length">
<ng-container *ngFor='let subcategory of category.subCategories'>
<tr>
<td (click)="subcategory.expand = !subcategory.expand">
<span style="margin-left: 40px;" class="{{subcategory.expand ?'fa fa-angle-down':'fa fa-angle-right'}"></span>
<span>{{subcategory.name}}</span>
</td>
<td class="text-center">
<span class="label success">{{subcategory.subCategoryName}}</span>
</td>
</tr>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
这是新的组件类：
export class AppComponent {
name = "Angular";
dropdownData: any;
data = {
policy: [
{
policyName: "a1",
name: "policy 1.1",
expand: false,
categories: [
{
categoryName: "c1",
name: "category 1.1",
expand: false,
subCategories: [
{
subCategoryName: "s1",
name: "subCategory 1.1"
},
{
subCategoryName: "s2",
name: "subCategory 1.2"
}
]
},
{
categoryName: "c2",
name: "category 1.2",
expand: false,
subCategories: [
{
subCategoryName: "s5",
name: "subCategory 2.1"
},
{
subCategoryName: "s6",
name: "subCategory 2.2"
}
]
}
]
},
{
policyName: "a2",
name: "policy 1.2",
expand: false,
categories: [
{
categoryName: "c4",
name: "category 1.1",
expand: false,
subCategories: [
{
subCategoryName: "s13",
name: "subCategory 1.1"
}
]
},
{
categoryName: "c5",
name: "category 1.2",
expand: false,
subCategories: [
{
subCategoryName: "s17",
name: "subCategory 2.1"
},
{
subCategoryName: "s18",
name: "subCategory 2.2"
}
]
},
{
categoryName: "c6",
name: "category 1.3",
expand: false,
subCategories: [
{
subCategoryName: "s21",
name: "subCategory 3.1"
}
]
}
]
}
]
};
ngOnInit() {
this.dropdownData = this.data.policy;
console.log("dataas", this.dropdownData);
}
expand(collection, expandedItem) {
collection.forEach(item => item.expand = item.id === expandedItem.id);
}
}