tree table using normal html tree table- angular 2+

Question

我正在尝试使用普通 html table.

一棵树 table

{
"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">&nbsp;</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>

使用此方法，table 正在显示详细信息。

问题:

但是，policy1.1的类别是category1.1和category1。2.it应该显示在policy1.1下面嵌套。但是，如果我单击 policy1.1，Table 显示的值低于 policy1.2（在所有策略下方扩展 policy1.1 的值）。

同样的问题正在影响子类别作为参考，附加了 stackblitz 实现，

stackblitz

我想做些什么来解决这个问题。

有人能帮帮我吗？？

提前致谢

Answer 1

检查这是否适合您

https://stackblitz.com/edit/angular-gxeins?file=src%2Fapp%2Fapp.component.html

<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"
              }
            ]
          }
        ]
      }
    ]
  };

tree table using normal html tree table- angular 2+

tree table using normal html tree table- angular 2+

angular

angular5

angular6

angular7