Angular 2+ - 使用 API 的树表

Question

我有三个用于类别、子类别和策略的 API。

例如：

“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.子类别

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 响应：列出 category1 的所有子类别（因为我们通过 categoryName 给 searchTerm）

{ "data":
  [
   {
    projectName:null,
    categoryName: null,
    subCategoryName: subcategory1,
    controlName:null
   },
   {
    projectName:null,
    categoryName: null,
    subCategoryName: subcategory2,
    controlName:null
   }
  so on....
  ]
}

2.控制

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 响应：列出了 subcategory1 的所有控件（因为我们通过 subcategoryname 给 searchTerm）

{ "data":
  [
   {
    projectName:null,
    categoryName: null,
    subCategoryName: null,
    controlName: control1
   },
   {
    projectName:null,
    categoryName: null,
    subCategoryName: null,
    controlName: control2
   }
  so on....
  ]
}

当我打开第一个保单之后，我会打开下一个保单。但是第二个策略的类别在第一个策略中会自动更新。

为了调用这些 API，我使用了 getCategory()、getSubcategory()、getControl() 三个 get 方法。

我正在附加 stackblitz 示例..

在 stackBlitz 中我使用了三种方法（就像我使用的方法一样）

即，

open(i)====> 我取索引，i 取策略值的值（但在我的 Api 中，我必须发送 categoryName 来获取子类别）

subOpen(i)====> 我采用 index,j 值来获取 subCategory 值（但在我的 Api 中，我必须发送 subCategory 来获取控件）

这里， https://stackblitz.com/edit/angular-9q4fbn?file=src%2Fapp%2Fapp.component.html.

你能告诉我如何解决这个问题吗？

Answer 1

您的数据已经以一种可以将其绑定到您的视图的方式进行结构化。无需对部分数据树的引用进行微观管理。

您遇到的逻辑问题是，即使您在树中的类别上循环，您也绑定到子类别的相同引用。更新对 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);
  }
}