Angular 2+ - 使用 API 的树表 [英] Angular 2+ - Tree table using API
问题描述
我有三个用于类别、子类别和政策的 API.
例如:
"https://restapi.com/project".
1.类别
在category的情况下，对于上面的Api，我必须像上面的json一样传递body(原始数据){"开始索引":"1","计数":"150","groupBy":"类别","searchTerm":"PROJECT:project1"}API 响应:列出所有类别
{ "数据":[{项目名称:空，类别名称:类别1，子类别名称:空，控件名称:空},{项目名称:空，类别名称:类别2，子类别名称:空，控件名称:空}很快....]}2.子类别
在子类的情况下，对于上面的Api，我必须像上面的json一样传递body(原始数据){"开始索引":"1","计数":"150","groupBy":"子类别","searchTerm":"PROJECT:projectName1,CATEGORY: category1"}Api Response:列出 category1 的所有子类别(因为我们通过 categoryName 给出 searchTerm)
{ "数据":[{项目名称:空，类别名称:空，子类别名称:子类别1，控件名称:空},{项目名称:空，类别名称:空，子类别名称:子类别2，控件名称:空}很快....]}2.控制
在控制的情况下，对于上面的Api，我必须像上面的json一样传递body(原始数据){"开始索引":"1","计数":"150","groupBy":"子类别","searchTerm":"PROJECT:projectName1,SUB-CATEGORY: subcategory1"}Api Response:列出子类别1的所有控件(因为我们按子类别名称给出searchTerm)
{ "数据":[{项目名称:空，类别名称:空，子类别名称:空，控件名称:控件1},{项目名称:空，类别名称:空，子类别名称:空，控件名称:控件2}很快....]}当我打开第一个策略之后，我打开下一个.但是第二个策略的类别会在第一个策略中自动更新.
为了调用这些Api，我使用了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.>
你能告诉我如何解决这个问题吗?
您的数据已经以一种可以将其绑定到您的视图的方式进行结构化.无需对数据树各部分的引用进行微观管理.
您遇到的逻辑问题是，即使您在树中循环遍历类别，您也绑定到相同的子类别引用.更新对 dropdownData1 或 dropdownData2 的引用会更改所有类别的显示.
做你想做的事情实际上要简单得多.只需按原样使用现有的数据结构即可.
https://stackblitz.com/edit/angular-dpziva
这是新视图:
<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-容器></ng-容器></ng-容器></ng-容器></ng-容器> 这是新的组件类:
export class AppComponent {name = "角度";下拉数据:任何；数据 = {政策: [{政策名称:a1"，名称:政策1.1"，展开:假，类别: [{类别名称:c1"，名称:1.1 类"，展开:假，子类别: [{子类别名称:s1"，名称:子类别 1.1"},{子类别名称:s2"，名称:子类别 1.2"}]},{类别名称:c2"，名称:1.2 类"，展开:假，子类别: [{子类别名称:s5"，名称:子类别 2.1"},{子类别名称:s6"，名称:子类别 2.2"}]}]},{政策名称:a2"，名称:政策1.2"，展开:假，类别: [{类别名称:c4"，名称:1.1 类"，展开:假，子类别: [{子类别名称:s13"，名称:子类别 1.1"}]},{类别名称:c5"，名称:1.2 类"，展开:假，子类别: [{子类别名称:s17"，名称:子类别 2.1"},{子类别名称:s18"，名称:子类别 2.2"}]},{类别名称:c6"，名称:1.3 类"，展开:假，子类别: [{子类别名称:s21"，名称:子类别 3.1"}]}]}]};ngOnInit() {this.dropdownData = this.data.policy;console.log("dataas", this.dropdownData);}展开(集合，扩展项){collection.forEach(item => item.expand = item.id === expandItem.id);}}I have three Apis for categories,subcategories and policies.
For eg:
"https://restapi.com/project".
1.Category
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 Response: Listed out all categories
{ "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 Response: Listed out all subcategory of category1(because we give searchTerm by categoryName)
{ "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: Listed out all Control of subcategory1(because we give searchTerm by subcategoryname)
{ "data":
[
{
projectName:null,
categoryName: null,
subCategoryName: null,
controlName: control1
},
{
projectName:null,
categoryName: null,
subCategoryName: null,
controlName: control2
}
so on....
]
}
When I open the 1st policy and after that, I open the next one. But the categories of second policy is automatically updated in first policy.
For calling these Apis, I used three get method for getCategory(),getSubcategory(),getControl().
I am attaching stackblitz example..
In stackBlitz I used three methods(like the method which I used)
ie,
open(i)====> I take index,i value for taking the policy values(but in my Api, I have to sent categoryName to get subcategory)
subOpen(i)====> I take index,j value for taking the subCategory values(but in my Api, I have to sent subCategory to get controls)
Here, https://stackblitz.com/edit/angular-9q4fbn?file=src%2Fapp%2Fapp.component.html.
Can you please tell me how to solve this??
Your data is already structured in a way that makes sense for binding it to your view. There's no need to micromanage references to parts of your data tree.
The logical issue you were having is that even though you were looping over categories in your tree, you were binding to the same reference of subCategories. Updating the reference to dropdownData1 or dropdownData2 changes the display for all categories.
It's actually much simpler to do what you want. Just use your existing data structure as it is.
https://stackblitz.com/edit/angular-dpziva
Here's the new view:
<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>
Here's the new component class:
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);
}
}
这篇关于Angular 2+ - 使用 API 的树表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
