Angular 2+-使用API的树表

能告诉我如何解决这个问题吗?解决方案您的数据已经进行了结构化，可以将其绑定到您的视图.无需微管理对数据树各部分的引用.您遇到的逻辑问题是，即使您遍历树中的类别，您仍绑定到subCategories的相同引用.将引用更新为dropdownData1或dropdownData2会更改所有类别的显示.执行所需的操作实际上要简单得多.只需按原样使用现有数据结构即可. https://stackblitz.com/edit/angular-dpziva 这是新视图: <ng-container *ngFor='let policy of dropdownData'> <tr> <td (click)="policy.expand = !policy.expand"> {{policy.name}} </td> <td class="text-center"> {{policy.policyName}} </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"> {{category.name}} </td> <td class="text-center"> {{category.categoryName}} </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"> {{subcategory.name}} </td> <td class="text-center"> {{subcategory.subCategoryName}} </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); }} 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-dpzivaHere's the new view:<ng-container *ngFor='let policy of dropdownData'> <tr> <td (click)="policy.expand = !policy.expand"> {{policy.name}} </td> <td class="text-center"> {{policy.policyName}} </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"> {{category.name}} </td> <td class="text-center"> {{category.categoryName}} </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"> {{subcategory.name}} </td> <td class="text-center"> {{subcategory.subCategoryName}} </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的树表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

expand

Angular 2+-使用API​​的树表

Angular 2+-使用API的树表